HOME>WEBプログラム覚書>要素名(タグ名)で要素オブジェクトを取得

要素名(タグ名)で要素オブジェクトを取得

IDではなくタグの名前でオブジェクトを取得したい場合、getElementsByTagNameを利用する。

サンプル

クリックでid="gEBTN" 内のliオブジェクトを取得してHTMLを含むliの中身をid="gEBTNresult"に書き出す。

Javascript

  1. <script language="javascript" type="text/javascript">
  2.     function Test(){
  3.         var li = document.getElementById("gEBTN").getElementsByTagName("li");
  4.         var result = document.getElementById("gEBTNresult");
  5.         for($i=0; $i<li.length; $i++){
  6.             result.innerHTML += "<li>" + li[$i].innerHTML + "<\/li>";
  7.         }
  8.     }
  9. </script>
  10.  

HTML

  1. <div id="gEBTN">
  2.     <ul>
  3.     <li>getElementsByTagNameのテスト</li>
  4.     <li>getElementsByTagNameのテスト2</li>
  5.     <li><span class="redbold">getElementsByTagNameのテスト3</span></li>
  6.     </ul>
  7. </div>
  8.  

実行結果

  • 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

コメント

コメントする
Name
Email Address
URL