.getElementsByTagName()

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByTagName

与えられたタグ名を持つ要素のHTMLCollectionを返します。ルートノードを含むドキュメント全体が検索されます。返されたHTMLCollectionは実稼働しており、これは自身を更新すると再度document.getElementsByTagName()を呼び出す必要無く、 DOMツリーが自動的に同期されることを意味します。

文法

var elements = document.getElementsByTagName(name);

引数	説明
name	要素の名前を表す文字列を指定します。特別な文字列"*"は、全ての要素を表します。
戻り値
elements	ツリーで検出した順に並べられた要素の実稼働中のHTMLCollection(ただし、後述する注意を参照)を返します。

注意: 最新のW3Cの仕様では、 elementsはHTMLCollectionとしていますが、 WebKitブラウザはNodeListを返します。詳細は、bug 14869を参照してください。

例

下記の例では、getElementsByTagName()は特定の親要素から開始して、親要素からDOMを通ってトップダウンで再帰的に検索を行い、タグのnameパラメーターにマッチする子要素を探します。

getElementsByTagName()がdocumentノードでは無いノード上で実行された場合、実際にはelement.getElementsByTagName()メソッドが使用されることに注意してください。

<!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("There are " + num + " paragraph in this document");
    }

    function div1ParaElems() {
      var div1 = document.getElementById("div1");
      var div1Paras = div1.getElementsByTagName("p");
      var num = div1Paras.length;
      alert("There are " + num + " paragraph in #div1");
    }

    function div2ParaElems() {
      var div2 = document.getElementById("div2");
      var div2Paras = div2.getElementsByTagName("p");
      var num = div2Paras.length;
      alert("There are " + num + " paragraph in #div2");
    }
  </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();">
    show all p elements in document</button><br />

  <button onclick="div1ParaElems();">
    show all p elements in div1 element</button><br />

  <button onclick="div2ParaElems();">
    show all p elements in div2 element</button>

</body>
</html>

注意事項

HTMLドキュメント上で呼び出す際に、処理を行う前にその引数を小文字にします。これは、HTMLドキュメントのSVG要素のサブツリーのキャメルケースへのマッチを試みる際には望まれない処理です。そういったケースでは、document.getElementsByTagNameNS()が有用です。 bug 499656を参照してください。

document.getElementsByTagName()はドキュメント全体を含めて検索するということを除き、 element.getElementsByTagName()と極めてよく似たメソッドです。

仕様

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。