class属性の値を指定して要素ノードを取得(getElementsByClassName)

Document オブジェクトの getElementsByClassName メソッドは、要素の class 属性の値を指定して一致する要素ノードをすべて取得します。ここでは getElementsByClassName メソッドの使い方について解説します。

(Last modified: 2024-09-11)

getElementsByClassNameの書式と使い方
特定の要素の子孫要素に限定して要素ノードを取得する

getElementsByClassNameの書式と使い方

Document オブジェクトの getElementsByClassName メソッドは class 属性の値を指定して要素ノードを取得します。書式は次の通りです。

document.getElementsByClassName(classnames)

引数には class 属性の値を DOMString オブジェクトで指定します(例えば 'box' など)。複数の class 属性の値を指定することができ、指定した値のいずれかに一致する要素ノードをすべて取得します。その場合は空白文字で区切って指定します(例えば 'box menu' など)。戻り値は HTMLCollection オブジェクトです。

HTMLCollection オブジェクトは複数の要素ノードの集合です。 HTMLCollection オブジェクトでは length プロパティと item メソッド、および namedItem メソッドが用意されており、次のように取得した要素の数を取得したり、指定の要素を取り出すことができます。

let elements = document.getElementsByClassName('box');

// 取得した要素の数を取得
let len = elements.length;

// インデックスを指定して要素を取得
let element = elements.item(0);

// 次の形式でもインデックスを指定して要素を取得
let element = elements[0];

同じ class 属性の値をを持つ要素ノードは、 HTML ページの中で記述された順番にインデックスが割り当てられています。インデックスは最初が 0 で 1, 2, 3... と続いていきます。

指定した class 属性の値が付けられた要素ノードが見つからなかった場合、 getElementsByClassName メソッドは null を返すわけではなく、 length が 0 の HTMLCollection オブジェクトを返します。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName</title>
<style type="text/css">
  div, p{
    padding:20px;
    margin:10px;
    width:30%;
  }
  .box{
    border:1px solid #ff0000;
  }
</style>
</head>
<body>

<p>外出記録</p>

<div class="box">
  <p>今日は外でランチを食べました</p>
  <p class="box">場所：港区南青山</p>
  <p class="box">店名：リストランテ南青山</p>
</div>

<button onClick="getElements();">要素を取得</button>

<script>
function getElements(){
    let elements = document.getElementsByClassName('box');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        elements.item(i).style.border="2px solid #0000ff";
    }
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 HTML ページに含まれる class 属性が指定した値の要素ノードを取得し、要素のスタイル( border の色と太さ)を変更しています。

getElementsByClassNameの書式と使い方(1)

getElementsByClassNameの書式と使い方(2)

div 要素と p 要素に同じ class 属性の値を設定しているので、どちらも同じように要素ノードを取得しスタイルが変更されています。

特定の要素の子孫要素に限定して要素ノードを取得する

getElementsByClassName メソッドは Document オブジェクトの他に Element オブジェクトでも用意されています。その為、特定の要素に対して getElementsByClassName メソッドを使用すると、その要素の子や孫の要素に限定して class 属性の値を指定して要素ノードを取得することができます。書式は次の通りです。

element.getElementsByClassName(classnames)

例えば id 属性の値が 'example' の要素ノードの子孫の中から class 属性の値が 'box' の要素ノードの一覧を取得するには次のように記述します。

let element = document.getElementById('example');
let elements = element.getElementsByClassName('box');

次のようにまとめて記述することもできます。

let elements = document.getElementById('example').getElementsByClassName('box');

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName</title>
<style type="text/css">
  div.box, p{
    padding:20px;
    margin:10px;
    width:30%;
  }
  .box{
    border:1px solid #ff0000;
  }
</style>
</head>
<body>

<p>外出記録</p>

<div class="box">
  <p>今日は外でランチを食べました</p>
  <div id="shopinfo">
    <p class="box">場所：港区南青山</p>
    <p class="box">店名：リストランテ南青山</p>
  </div>
</div>

<button onClick="getElements();">要素を取得</button>

<script>
function getElements(){
    let element = document.getElementById('shopinfo');
    let elements = element.getElementsByClassName('box');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        elements.item(i).style.border="2px solid #0000ff";
    }
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性の値が shopinfo の要素ノードの子孫の要素ノードの中で class 属性が指定した値の要素ノードを取得し、スタイル( border の色と太さ)を変更しています。

特定の要素の子孫要素に限定して要素ノードを取得する(1)

特定の要素の子孫要素に限定して要素ノードを取得する(2)

-- --

getElementsByClassName メソッドの使い方について解説しました。

( Written by Tatsuo Ikura )

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。