getElementsByTagNameはdocumentオブジェクトおよびElementオブジェクトのメソッドで、指定したタグ名から要素を取得することができます。
スポンサーリンク
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ul> <li>テスト1</li> <li>テスト2</li> <li id ="test3">テスト3</li> </ul> <script> document.addEventListener('DOMContentLoaded', function(){ var list = document.getElementsByTagName('li'); console.log( list.length ); //3 console.log( list[0] ); //<li>テスト1</li> console.log( list.item(1) ); //<li>テスト2</li> console.log( list.namedItem('test3') ); //<li id ="test3">テスト3</li> },false); </script> |
getElementsByTagNameメソッドは要素の集合であるHTMLCollectionオブジェクトを返します（※getElementByIdメソッドは、Elementオブジェクトを返します）。HTMLCollectionオブジェクトは配列のようなオブジェクトで、以下のようなプロパティとメソッドを利用できます。
lengthプロパティ 要素数
item(i)メソッド i番目の要素を取得する
namedItem(id/name)メソッド idまたはname属性の要素を取得する
関連ページ
getElementByIdについて[DOM][ノード][Element]
getElementsByTagNameは、Elementオブジェクトのメソッドでもあるので、getElementById（Elementオブジェクトを返す）を利用して下記のようにある特定の要素内のタグだけを指定することも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div id ="test1"> <ul> <li>テスト1</li> <li>テスト2</li> </ul> </div> <div id ="test2"> <ul> <li>テスト4</li> <li>テスト5</li> </ul> </div> <script> document.addEventListener('DOMContentLoaded', function(){ var test2 = document.getElementById('test2'); //idがtest2の要素を取得 var test2list = test2.getElementsByTagName('li'); //test2内のliタグ要素を取得 for(var i = 0; i<test2list.length; i++){ console.log(test2list[i]); //<li>テスト4</li><li>テスト5</li> } },false); </script> |
またタグ名にはワイルドカード（’*’）を指定して、すべての要素を取得することもできます。
|
1 |
document.getElementsByTagName('*'); |
ライブオブジェクト
HTMLCollectionオブジェクトはライブオブジェクトの特徴を持ちます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<ul id= "test"> <li>テスト1</li> <li>テスト2</li> <li>テスト3</li> </ul> <script> document.addEventListener('DOMContentLoaded', function(){ var list = document.getElementsByTagName('li'); console.log(list.length); //3 //<li>テスト4</li>を作成 var addli = document.createElement('li'); addli.appendChild(document.createTextNode('テスト4')); //ul内に<li>テスト4</li>を追加 var test = document.getElementById('test'); test.appendChild(addli); console.log(list.length); //4 },false); </script> |
13行目の時点では<li>タグ行は3つ存在し、15〜21行目において<li>タグ行を１つ追加しています。
11行目において、getElementsByTagNameメソッドは一度だけHTMLCollectionオブジェクト（上記コードではlistオブジェクト）を返している状況ですが、23行目においてlistオブジェクトは<li>タグを追加した後の状態を知っていることがわかります。つまりHTMLCollectionオブジェクトは常にDOMツリーを参照しています。このような挙動を持つのがライブオブジェクトです（『パーフェクトJavaScript』p.252参照）。
