« ブログ始めました | トップページ | 【JavaScript】 動的に要素を変更してみる »

2006年6月 5日 (月)

【JavaScript】 要素を取得する

ここ1~2年の間にDynamic HTMLが多くの場所で利用されるようになりました。
Dynamic HTMLは、ページをリロードすることなく要素の外観を変えたり中身の文字を
変えたりすることが出来ますが、変更したい要素を取得しないと始まりません。
そこで、まず最初は、要素(HTML内のタグ)を取得する方法について書きたいと思います。

1.IDを指定して取得する
 HTML内の要素にはIDを付けることが出来ますが、そのIDを指定して要素を取得する方法です。
 まず、以下のようにタグにIDを付けます。
 <div id="test">DIVタグです</div>
 そして、このDIV要素を取り出すJavaScriptは、以下のようになります。

document.getElementById("test")

 試しに、以下のJavaScriptを実行してみてください。
 「DIV」と表示されたらOKです。

alert(document.getElementById("test").tagName);

 ただし、このようにして取得する場合は、複数の要素に同じIDをつけてはいけません。

2.タグの名前を指定して取得する
 "DIV"などのタグの名前で要素の配列を取得することが出来ます。
 配列となっているのは、ページ内にDIVタグがいくつあるかわからないためです。
 
 以下のようなタグがあったとします。
 <div>1つ目のDIVタグです</div>
 <div>2つ目のDIVタグです</div>
 これらを取得するJavaScriptは、以下のようになります。

 document.getElementsByTagName("div")

 Elementsとなっている点に注意してください。
 試しに、以下のJavaScriptを実行すると、

alert(document.getElementsByTagName("div").length);

 「2」と表示されると思います。
 lengthは、配列の数を取得するプロパティです。
 すべての要素にアクセスするには、以下のようにループを使います。

var elements = document.getElementsByTagName("div");
for(i=0;i<elements.length;i++){
    alert(elements[i].innerHTML);
}

|

« ブログ始めました | トップページ | 【JavaScript】 動的に要素を変更してみる »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10401491

この記事へのトラックバック一覧です: 【JavaScript】 要素を取得する:

« ブログ始めました | トップページ | 【JavaScript】 動的に要素を変更してみる »