Solarized
HOME > WEBプログラム覚書 > 要素名(タグ名)で要素オブジェクトを取得
要素名(タグ名)で要素オブジェクトを取得
IDではなくタグの名前でオブジェクトを取得したい場合、getElementsByTagNameを利用する。
サンプル
クリックでid="gEBTN" 内のliオブジェクトを取得してHTMLを含むliの中身をid="gEBTNresult"に書き出す。
Javascript
- <script language="javascript" type="text/javascript">
- function Test(){
- var li = document.getElementById("gEBTN").getElementsByTagName("li");
- var result = document.getElementById("gEBTNresult");
- for($i=0; $i<li.length; $i++){
- result.innerHTML += "<li>" + li[$i].innerHTML + "<\/li>";
- }
- }
- </script>
HTML
- <div id="gEBTN">
- <ul>
- <li>getElementsByTagNameのテスト</li>
- <li>getElementsByTagNameのテスト2</li>
- <li><span class="redbold">getElementsByTagNameのテスト3</span></li>
- </ul>
- </div>
実行結果
- getElementsByTagNameのテスト
- getElementsByTagNameのテスト2
- getElementsByTagNameのテスト3
クリック
注意事項
getElementsByTagNameは取得要素を配列で返しますがArrayオブジェクトではないようです。lengthや添え字は使えますがメソッドが使えない・・・
なんかよくわからん・・・
2009/01/09 追記
よくわからなかったことについてなんとなく解決
getElementsByTagName()が返すのは配列ではなくNodeListオブジェクト。
プロパティはlength、メソッドはitem()をもつ読み取り専用のオブジェクト。
javascriptではNodeListオブジェクトは配列のように振舞うのでli[n]で
要素にアクセスできますがNodeListはObjectを継承しているので
Arrayオブジェクトのメソッドは利用できないってことだと思う。
| 投稿日 |
2007年9月14日 14:35 |
| カテゴリ |
JavaScript |
| タグ |
サンプルコード | 動作確認 | 関数 |
| トラックバック URL |
http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1091 |