タグ名を指定して要素ノードを取得(getElementsByTagName)

広告

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

getElementsByTagNameの書式と使い方

Document オブジェクトの getElementsByTagName メソッドはタグ名(要素名)を指定して要素ノードを取得します。書式は次の通りです。

document.getElementsByTagName(tagname)

引数にはタグ名を DOMString オブジェクト(文字列と考えて頂いて構いません)で指定します(例えば 'div' や 'p' など)。タグ名に '*' を指定した場合はすべての要素に一致します。戻り値は HTMLCollection オブジェクトです。

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

let elements = document.getElementsByTagName('p');

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

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

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

// ID属性またはname属性を指定して要素を取得
let element = elements.item('user');

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

指定したタグ名の要素ノードが見つからなかった場合、 getElementsByTagName メソッドは null を返すわけではなく、 length が 0 の HTMLCollection オブジェクトを返します。

サンプルコード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>getElementsByTagNameのサンプル</title>
</head>
<body>

<p>フルーツの一覧</p>

<div>
<p>スイカ</p>
<p>さくらんぼ</p>
</div>

<div>
<p>イチゴ</p>
<p>みかん</p>
</div>

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

<script>
function getElements(){
    let elements = document.getElementsByTagName('p');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        console.log('Text: ' + elements.item(i).textContent);
    }
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 HTML ページに含まれる p タグの要素ノードをすべて取得し、順に要素ノードに含まれるテキストを取得してコンソールに表示します。

getElementsByTagNameの書式と使い方(1)

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

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

element.getElementsByTagName(tagname)

引数にはタグ名を DOMString オブジェクトで指定します(例えば 'div' や 'p' など)。タグ名に '*' を指定した場合はすべての要素に一致します。戻り値は HTMLCollection オブジェクトです。なお、起点となる要素ノード自身は対象ではありません。

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

let element = document.getElementById('example');
let elements = element.getElementsByTagName('p');

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

let elements = document.getElementById('example').getElementsByTagName('p');

サンプルコード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>getElementsByTagNameのサンプル</title>
</head>
<body>

<p>フルーツの一覧</p>

<div id="summer">
<p>スイカ</p>
<p>さくらんぼ</p>
</div>

<div id="winter">
<p>イチゴ</p>
<p>みかん</p>
</div>

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

<script>
function getElements(){
    let winter = document.getElementById('winter');
    let elements = winter.getElementsByTagName('p');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        console.log('Text: ' + elements.item(i).textContent);
    }
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性の値が winter の要素の子孫要素の中で p タグの要素ノードをすべて取得し、順に要素ノードに含まれるテキストを取得してコンソールに表示します。

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

-- --

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

( Written by Tatsuo Ikura )

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

著者 / TATSUO IKURA

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