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

| 2007年09月14日 14:35

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

サンプル

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


<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>


<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オブジェクトのメソッドは利用できないってことだと思う。

DOM Scripting 標準ガイドブック ~やさしく学ぶ、JavaScriptとDOMによるWebデザイン~ (Web Designing BOOKS)

著者 : Jeremy Keith / 金額 : ￥ 3,045

kantenna.com 最新更新ページ

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

トラックバック

  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/376
コメント (0)
コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)





この情報を登録しますか?