document.getElementsByTagName

ここへジャンプ:
  1. 書式
  2. 例
  3. 注記
  4. 仕様
  5. 関連情報

この翻訳は不完全です。英語から この記事を翻訳 してください。

与えられたタグ名を持つ要素の HTMLCollection を返します。ルートノードを含めたドキュメント全体が検索されます。返されたHTMLCollectionis はライブで、つまり document.getElementsByTagName() をもう一度呼び出さなくてもDOMツリーと自動的に同期を保つよう自分自身を更新します。.

書式

elements = document.getElementsByTagName(name)
  • elements は、ツリーに現れる順に並べられた、見つかった要素の生きたHTMLCollectionです(が下記の注意を見てください)。
  • name は要素の名前を表す文字列です。特殊な文字列 "*" は全ての要素を表します。

The latest W3C specification では elements は HTMLCollectionです;しかしこのメソッドはWebKit ブラウザーでは NodeList を返します。詳しくは バグ 14869 を見てください。

例

以下の例では、getElementsByTagName は特定の親要素から始まり、その親要素から DOM を上から下へ再帰的に検索し、タグが name パラメータと一致する子要素を探します。

getElementsByTagName が呼ばれたノードが document ノードでない場合、実際には DOMツリー内の特定の要素から検索を始める Element.getElementsByTagName() が使われることに注意してください。

ボタンをクリックすると getElementsByTagName() が使われて、特定の親 (ドキュメント自体や、2つの{HTMLElement("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 + " 個の <p> 要素があります");
    }

    function div1ParaElems() {
      var div1 = document.getElementById('div1');
      var div1Paras = div1.getElementsByTagName('p');
      var num = div1Paras.length;
      alert("div1 要素には " + num + " 個の <p> 要素があります");
    }

    function div2ParaElems() {
      var div2 = document.getElementById('div2');
      var div2Paras = div2.getElementsByTagName('p');
      var num = div2Paras.length;
      alert("div2 要素には" + num + " 個の <p> 要素があります");
    }
  </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()と類似しています。

仕様

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: unaginokabayaki, Uemmra3, chitoku, mk7087, fscholz, jsx, Mgjbot, Shoot, Marsf, Hfjapancom
最終更新者: unaginokabayaki,