概要
与えられたタグ名を持つ要素のリストを返します。ルートノードを含めたドキュメント全体が検索されます。
書式
elements = document.getElementsByTagName(name)
elementsは、ツリーに現れる順に並べられた、見つかった要素の生きたNodeListです。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