ここへジャンプ:

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

与えられたタグ名を持つ要素の 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>

注記

When called on an HTML document, getElementsByTagName() lower-cases its argument before proceeding. This is undesirable when trying to match camelCase SVG elements in a subtree in an HTML document. document.getElementsByTagNameNS() is useful in that case. See also バグ 499656.

document.getElementsByTagName() is similar to element.getElementsByTagName(), except that its search encompasses the whole document.

仕様

関連情報

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

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