.getElementsByTagName()

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

指定されたタグ名のHTMLCollectionを返します。ルートのノードを含む完全なdocumentが検索対象となります。返されるHTMLCollectionは実稼働中のものであり、これは再びdocument.getElementsByTagName()を呼び出すこと無く、 DOMツリーの同期が維持され自動的に自身を更新することを意味します。

文法

var elements = document.getElementsByTagName(name);

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

注意: 最新のW3C仕様では、 elementsはHTMLCollectionであるとしています。ただし、このメソッドはWeKitブラウザではNodeListを返します。詳細は、bug 14869を参照してください。

)、%>

例

下記の例では、特定の親要素からgetElementsByTagName()を開始し、引数のタグ名にマッチする子要素を見つけるために、親要素からDOMを通して再帰的にトップダウンで検索が実行されます。

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要素上で呼び出された場合、 getElementsByTagNameは処理の前に引数を小文字にします。これは、HTMLドキュメントのサブツリー内において、キャメルケースのSVG要素へのマッチを試みる際には望ましくない動作です。このようなケースでは、element.getElementsByTagNameNSを使用します。また、 bug 499656も参照してください。

element.getElementsByTagNameは、その検索が指定した要素の子孫に制限されるということを除き、 document.getElementsByTagNameと似ています。

仕様

ブラウザ互換性

デスクトップ
機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	1.0	◯	5.5	◯	◯
getElements ByTagName("*")	1.0	◯	6.0	◯	◯

モバイル
機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	◯	◯	◯
getElements ByTagName("*")	?		?	?	?	?

[1] Firefox 19より前のバージョンでは、このメソッドはNodeListを返しており、その後、仕様変更を反映したものに変更されました。

[2] 最初、このメソッドはNodeListを返していましたが、その後、仕様変更を反映したものに変更されました。(Chrome、IE、Safariが該当)

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

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