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

広告

Document オブジェクトの getElementsByClassName メソッドは、要素の class 属性の値を指定して一致する要素ノードをすべて取得します。ここでは 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)

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

例えば 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 )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。