最近JavaScriptの勉強をしている@yasumohaです。
始めたばかりなのでまだまだ基本ができていません。
そんな訳で、今回はDOM要素を取得するメソッドをまとめてみたいと思います。
IDを指定して取得する
|
1 |
document.getElementById("id"); |
ID属性で指定した名前の要素を取得します。
IDは1ページに同じものを複数指定することはできません。
よって、取得できる要素は1つだけです。
例えば、以下のようなHTMLドキュメントがあった場合。
|
1 2 3 |
<div id="id1" title="testTitle"> テストですよ </div> |
ここからid1の要素を取得するには
|
1 |
document.getElementById("id1"); |
となります。
タグを指定して取得する
|
1 2 |
document.getElementsByTagName("tag"); element.getElementsByTagName("tag"); |
こちらはタグ名から要素を取得します。
タグは1ページに1つ以上存在するので、リスト形式で取得されます。
名前もelementではなくelementsと複数形です。
例えば、以下のようなHTMLドキュメントがあった場合。
|
1 2 3 4 5 6 7 |
<div> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> </div> |
ここからli要素を取得するには
|
1 |
elements = document.getElementsByTagName("li"); |
となります。
liは複数ありますので、取得結果を格納したelementsはリストとなっています。
クラスを指定して取得する
|
1 |
document.getElementsByClassName("className"); |
こちらはクラス名を指定して要素リストを取得します。
クラスも1ページに複数存在するので、取得する要素は1つ以上のリスト形式となります。
以下のようなHTMLドキュメントからクラス名がtstClsの要素を取得するとします。
|
1 2 3 4 5 |
<div> <div id="id1" class="tstCls">テストクラス1</div> <div id="id2" class="tstCls">テストクラス2</div> <div id="id3" class="tstCls">テストクラス3</div> </div> |
JavaScriptでは
|
1 |
elements = document.getElementsByClassName("tstCls"); |
結果は、elementsに3つの要素がリストとなって格納されます。
名前（name属性）を指定して取得する
|
1 |
document.getElementsByName("name"); |
こちらはname属性で指定した名前で要素リストを取得します。
これも複数存在するため、リスト形式。
|
1 2 3 4 5 |
<div> <div" name="name1">テストネーム1</div> <div" name="name1">テストネーム2</div> <div" name="name2">テストネーム3</div> </div> |
JavaScriptでは
|
1 |
elements = document.getElementsByClassName("name1"); |
結果は、elementsに2つの要素がリストとなって格納されます。
さらに親子兄弟まで取得する
例えば、ここまでの何れかの方法で取得した要素をelementに格納しているとします。
そのelementから親子兄弟要素を取得するには以下のメソッドがあります。
|
1 2 3 4 5 6 |
element.parentNode; //親 element.childNodes; //子供 element.firstChild; //長子 element.lastChild; //末子 element.previousSibling; //兄or姉 element.nextSibling; //弟or妹 |
ちなみに、siblingは兄弟姉妹という意味。
brotherは兄弟、sisterは姉妹。siblingは両方の意味を含むようです
childeNodesだけ要素リストを取得します。それ以外は要素です。
要素リストから要素を取り出す
ここまで紹介したメソッドの中でいくつか要素リストを取得するものがありました。
では、要素リストから要素を取り出すにはどうしたら良いのでしょうか。
それは、こちら。
|
1 2 3 4 5 6 7 8 |
n = elements.length; //要素リストの長さを取得 elm = elements[0]; //0番目の要素を取得 elm = elements(0); //0番目の要素を取得 elm = elements.item(0); //0番目の要素を取得 elm = elements.id1; //id属性がid1の要素を取得 elm = elements.item("id1"); //id属性がid1の要素を取得 elm = elements.namedItem("id1"); //id属性がid1の要素を取得 elm = elements.tag("span"); //タグがspanの要素を取得 |
ちなみに、id1とはid属性で指定した名前です。
0とか番号で指定はできると思っていたけど、名前でも指定できるのは知りませんでした。
そしてリストにアクセスする方法といえば定番のforループはこうなります。
|
1 2 3 |
for (i = 0; i < elements.length; i++) { elm = elements[i]; } |
取れない要素はなくなったはず！
ここまでで紹介した手法であらゆる要素を取得することができるようになりました。
しっかし、本当にいろんな方法があるんですね。
まとめてみると、その量の多さにびっくり。
あとは使い込んで自分なりの使いやすい方法を見つけていけということでしょう。
それでは！
まずはここから始める！
まだまだ極めるなら
シェアして頂けたら感涙にむせびます
Rondoをまた読みたいなと思ってくれたら
是非、定期購読を！
