KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > javascript 子要素取得のメモ

javascript 子要素取得のメモ

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

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

サンプル

Javascript
  1.  onload = function(){
  2.   var self = this;
  3.   this.ul = document.getElementById("getJS");
  4.   var bt1 = document.MyForm.type1;
  5.   var bt2 = document.MyForm.type2;
  6.   var bt3 = document.MyForm.type3;
  7.  
  8.   bt1.onclick = function(){
  9.   var lis = self.ul.getElementsByTagName("li");
  10.   for(i=0; i<lis.length; i++){
  11.   alert(lis[i].innerHTML);
  12.   }
  13.   }
  14.  
  15.   bt2.onclick = function(){
  16.   var lis = self.ul.childNodes;
  17.   for(i=0; i<lis.length; i++){
  18.   alert(lis[i].innerHTML);
  19.   }
  20.   }
  21.  
  22.   bt3.onclick = function(){
  23.   var lisTag = self.ul.getElementsByTagName("li");
  24.   var lisNode = self.ul.childNodes;
  25.   alert("getElementsByTagNameでの結果：" + lisTag.length);
  26.   alert("childNodesでの結果：" + lisNode.length);
  27.   }
  28.  }
HTML
  1.  <ul id="getJS">
  2.   <li>ハウジングサービス
  3.   <ul>
  4.   <li>コロケーション</li>
  5.   </ul>
  6.   </li>
  7.   <li>専用サーバ</li>
  8.   <li>共有レンタルサーバ</li>
  9.   <li>VPS</li>
  10.  </ul>
  11.  <form name="MyForm">
  12.   <input type="button" name="type1" value="type1" />
  13.   <input type="button" name="type2" value="type2" />
  14.   <input type="button" name="type3" value="type3" />
  15.  </form>

実行結果

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

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

パーフェクトJavaScript (PERFECT SERIES 4)
作者:浜辺 将太 | 価格:￥ 3,360
投稿日 2007年12月16日 03:06
カテゴリ JavaScript
タグ テストコード | 関数
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1115

トラックバック(0)

コメント

コメントする
Name
Email Address
URL
PAGE RANK
TIME LINE
2012
02.08

[Ubuntu11.10]Winows XPユーザーがUbuntuを使ってみて

Windows XPとUbuntuのデュアルブート環境にしてみておもったこと。

2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.27

検索エンジンにやさしいパンくずリストのコーディング

ってなんだ。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24

[Ubuntu11.10]Windows XPとUbuntuのデュアルブート環境

いろいろあってUbuntuをインストールすることに。

2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。

Tags