JavaScript getElementsByTagName

概要: このチュートリアルでは、JavaScript の getElementsByTagName() を使用して、指定されたタグ名を持つ要素を選択する方法を学びます。

JavaScript getElementsByTagName() メソッドの紹介

getElementsByTagName() は、document オブジェクトまたは特定の DOM 要素のメソッドです。

getElementsByTagName() メソッドはタグ名を受け取り、ドキュメント内に表示される順序で、一致するタグ名を持つ要素のライブ HTMLCollection を返します。

以下は、getElementsByTagName() の構文を示しています。

let elements = document.getElementsByTagName(tagName);Code language: JavaScript (javascript)

getElementsByTagName() の戻り値のコレクションはライブです。つまり、一致するタグ名を持つ要素がドキュメントに追加または削除されたときに自動的に更新されます。

HTMLCollection は、関数の arguments オブジェクトと同様に、配列のようなオブジェクトであることに注意してください。

JavaScript getElementsByTagName() の例

次の例は、getElementsByTagName() メソッドを使用してドキュメント内の H2 タグの数を取得する方法を示しています。

H2 をカウント ボタンをクリックすると、ページに H2 タグの数が表示されます。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript getElementsByTagName() Demo</title>
</head>
<body>
    <h1>JavaScript getElementsByTagName() Demo</h1>
    <h2>First heading</h2>
    <p>This is the first paragraph.</p>
    <h2>Second heading</h2>
    <p>This is the second paragraph.</p>
    <h2>Third heading</h2>
    <p>This is the third paragraph.</p>

    <button id="btnCount">Count H2</button>

    <script>
        let btn = document.getElementById('btnCount');
        btn.addEventListener('click', () => {
            let headings = document.getElementsByTagName('h2');
            alert(`The number of H2 tags: ${headings.length}`);
        });
    </script>
</body>

</html>Code language: HTML, XML (xml)

仕組み

まず、getElementById() メソッドを使用して、H2 をカウント ボタンを選択します。
次に、ボタンのクリックイベントを匿名関数にフックします。
3 番目に、匿名関数で document.getElementsByTagName() を使用して、H2 タグのリストを取得します。
最後に、alert() 関数を使用して H2 タグの数を表示します。

まとめ

getElementsByTagName() は、document または element オブジェクトのメソッドです。
getElementsByTagName() はタグ名を受け取り、一致するタグ名を持つ要素のリストを返します。
getElementsByTagName() は、要素のライブ HTMLCollection を返します。 HTMLCollection は配列のようなオブジェクトです。

クイズ

このチュートリアルは役に立ちましたか？