javascript 子要素取得のメモ

| 2007年12月16日 03:06

javascriptで子要素を取得する方法についてのメモ

HTMLオブジェクト?ではgetElementsByTagNameメソッドが利用できる。「id」が「getJS」の「ul」以下の要素に含まれるHTMLを表示。

サンプル


onload = function(){
  var self = this;
  this.ul = document.getElementById("getJS");
  var bt1 = document.MyForm.type1;
  var bt2 = document.MyForm.type2;
  var bt3 = document.MyForm.type3;
  
  bt1.onclick = function(){
    var lis = self.ul.getElementsByTagName("li");
    for(i=0; i<lis.length; i++){
      alert(lis[i].innerHTML);
    }
  }
  
  bt2.onclick = function(){
    var lis = self.ul.childNodes;
    for(i=0; i<lis.length; i++){
      alert(lis[i].innerHTML);
    }
  }
  
  bt3.onclick = function(){
	var lisTag = self.ul.getElementsByTagName("li");
	var lisNode = self.ul.childNodes;
	alert("getElementsByTagNameでの結果：" + lisTag.length);
	alert("childNodesでの結果：" + lisNode.length);
  }
}

  <ul id="getJS">
  <li>ハウジングサービス
  <ul><li>コロケーション</li></ul>
  </li>
  <li>専用サーバ</li>
  <li>共有レンタルサーバ</li>
  <li>VPS</li>
  </ul>
  <form name="MyForm">
  <input type="button" name="type1" value="type1" />
  <input type="button" name="type2" value="type2" />
  <input type="button" name="type3" value="type3" />
  </form>

実行結果

  • ハウジングサービス
    • コロケーション
  • 専用サーバ
  • 共有レンタルサーバ
  • VPS

例によってIEとfirefoxで挙動が違う。type3のクリック結果から原因はchildNodesのようだ。ブラウザ間の厚い壁を乗り越えられるようになりたい・・・

javascript 子要素取得のメモタグ:

トラックバック
  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/199
コメントを投稿

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





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

このサイトは次のライセンスで保護されています。

Creative Commons License

Kantenna by Kantenna_Admin is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.1 Japan License.
IT業界、エンジニア関連の求人
Web業界に精通したエージェントなので、希望に合った仕事、プロジェクト、雇用形態を紹介してくれてしっかりと転職活動をサポートしてくれます。
初心者のみ採用！【スノーグラス】ＷＥＢ系エンジニア募集
初心者のみのweb系エンジニア求人!なんでだ?そろそろ転職考えてるのでここ行ってみようかな・・・
Twitter Updates