document.getElementsByTagName

概要

与えられたタグ名を持つ要素のリストを返します。ルートノードを含めたドキュメント全体が検索されます。

書式

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

例

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

getElementsByTagName が呼ばれたノードが document ノードでない場合、実際には element.getElementsByTagName が使われることに注意してください。

<html>

<head>
<title>getElementsByTagName example</title>

<script type="text/javascript">

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>

仕様

DOM Level 2 Core: Document.getElementsByTagName

 

 

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

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