HTML DOM getElementsByTagName() メソッド

定義と使用法

getElementsByTagName() メソッドは指定されたタグ名を持つオブジェクトのコレクションを返します。

構文

document.getElementsByTagName(tagname)

説明

getElementsByTagName() メソッドが返す要素の順序は、そのドキュメント内の順序です。

特殊な文字列 "*" を getElementsByTagName() メソッドに渡すと、ドキュメント内のすべての要素のリストが返され、要素の並び順はそのドキュメント内の順序です。

ヒントとコメント

注:getElementsByTagName() メソッドに渡される文字列は大文字小文字を区別しない。

例 1

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="いくつの入力要素がありますか?" />
</body>
</html>

例 2

getElementsByTagName() メソッドを使用して、どんな HTML 要素のリストも取得できます。例えば、以下のコードはドキュメント中のすべてのテーブルを取得します:

var tables = document.getElementsByTagName("table");
alert("This document contains " + tables.length + " tables");

例 3

もしドキュメントの構造を非常に熟知している場合、getElementsByTagName() メソッドを使用して特定の要素を取得することもできます。例えば、以下のコードはドキュメントの4番目のパラグラフを取得します:

var myParagragh = document.getElementsByTagName("p")[3];

ただし、特定の要素を操作する必要がある場合、getElementById() メソッドを使用する方が効果的です。