Document
インターフェイスの getElementsByTagName
メソッドは、指定されたタグ名を持つ要素の HTMLCollection
を返します。ルートノードを含めた文書全体が検索されます。返された HTMLCollection
は生きたものであり、つまり document.getElementsByTagName()
を再度呼び出さなくても DOM ツリーと同期を取り続けるよう、自動的に自分自身を更新します。.
Syntax
var elements = document.getElementsByTagName(name);
- elements は生きた
HTMLCollection
であり、見つかった要素がツリーに出現する順に並んでいます (ただし、下記のメモを見てください)。 - name は文字列で、要素の名前を表します。特殊な文字列 "*" は全ての要素を表します。
elements
は HTMLCollection
です。しかし、 WebKit ブラウザーではこのメソッドは NodeList
を返します。詳しくは バグ 14869 を見てください。例
以下の例では、 getElementsByTagName()
は特定の親要素から開始し、その親要素から DOM を上から下へ再帰的に検索し、タグが name
パラメータと一致する子要素を探します。これは document.getElementsByTagName()
と、機能的に同等な Element.getElementsByTagName()
は、 DOM ツリー内の特定の要素から検索を始めることを示します。
ボタンをクリックすると getElementsByTagName()
を使用して、特定の親 (文書自体または2つの <div>
要素の何れかに囲まれたもの) の子孫の段落要素を数えます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>getElementsByTagName example</title> <script> function getAllParaElems() { var allParas = document.getElementsByTagName('p'); var num = allParas.length; alert('この文書には ' + num + ' 個の段落があります'); } function div1ParaElems() { var div1 = document.getElementById('div1'); var div1Paras = div1.getElementsByTagName('p'); var num = div1Paras.length; alert('#div1 には ' + num + ' 個の段落があります'); } function div2ParaElems() { var div2 = document.getElementById('div2'); var div2Paras = div2.getElementsByTagName('p'); var num = div2Paras.length; alert('#div2 には' + num + ' 個の段落があります'); } </script> </head> <body style="border: solid green 3px"> <p>Some outer text</p> <p>Some outer text</p> <div id="div1" style="border: solid blue 3px"> <p>Some div1 text</p> <p>Some div1 text</p> <p>Some div1 text</p> <div id="div2" style="border: solid red 3px"> <p>Some div2 text</p> <p>Some div2 text</p> </div> </div> <p>Some outer text</p> <p>Some outer text</p> <button onclick="getAllParaElems();"> 文書内のすべての p 要素を表示</button><br /> <button onclick="div1ParaElems();"> div1 要素内のすべての p 要素を表示</button><br /> <button onclick="div2ParaElems();"> div2 要素内のすべての p 要素を表示</button> </body> </html>
メモ
HTML 文書上で呼び出された場合、 getElementsByTagName()
は処理前に引数を小文字に変換します。これは HTML 文書内のサブツリーにあるキャメルケースの SVG 要素に一致させようとする場合には望ましくありません。この場合は document.getElementsByTagNameNS()
が便利です。 バグ 499656 を参照してください。
document.getElementsByTagName()
は、検索が文書全体を含むという点以外は Element.getElementsByTagName()
と類似しています。
仕様書
ブラウザーの対応
デスクトップ | モバイル | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
基本対応 | Chrome 完全対応 あり | Edge ? | Firefox 完全対応 あり | IE ? | Opera ? | Safari ? | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile ? | Firefox Android 完全対応 あり | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 実装状況不明
- 実装状況不明
関連情報
Element.getElementsByTagName()
document.getElementById()
:id
によって検索した要素への参照を返すdocument.getElementsByName()
:name
によって検索した要素への参照を返すdocument.querySelector()
:'div.myclass'
のような CSS セレクターによって要素への参照を返す