初心者による DOM 要素ノードの取得一覧-1

概要

クライアントサイドのjavascriptにおいて、文書ツリーから要素ノードを取り出すというステップは欠かせない技術です。ここでは、文書ツリーから要素を取得する基本的な手段を一覧にしてみた。

getElementById()

id=""のように取得したい要素が明確な場合はgetElementById()を使う。

sample.js

document.getElementById(id)
 //id: 取得したい要素のid値

id値が複数あってしまった場合は最初に該当された要素１つを返す。

getElementsByTagName()

上のgetElementByIdとは似ているが、Elementsと複数形になっていることに注意。getElementsByTagNameメソッドは、タグ名をキーにして要素を取得する。

sample.js

document.getElementByTagName(name)
 //name: タグ名

これはタグをキーに要素を取得するので、複数の要素が該当する可能性があります。引数に「*」を指定することで、すべての要素を取得できます。
getElementsByTagNameの戻り値は、要素の集合です。これは、

length : リストに含まれる要素数
item(i).属性 or item[i].属性 : i番目の要素を取得
namedItem(name) : id、またはname属性が一致する要素を取得

のメソッドを使うことができる。

getElementsByName()

getElementsByNameメソッドは、name属性をキーに要素を取得する。一般的には、/などのフォーム要素へのアクセスなどで使う。getElementByIdメソッドのほうが使いやすい時が多い。

sample.js

document.getElenetByName(name)
 //name: name属性の値

使う際は、返り値が要素の配列になっているので自分が参照したい要素の順番をわかっていなければならない。逆に言うと、該当する要素が一つだけにしておいたほうが無難。
これはlength, item(i), namedItem(name)を使える。

getElementsByClassName()

これはclass属性をキーに要素を取得する。特定に役割を持った要素に対してなんらかの処理をしたいときにつかう。

javascript.sample.js

document.getElementsByClassName(class)
 //class: class属性の値

これはlength, item(i), namedItem(name)を使える。

querySelector() / querySelectorAll()

より複雑な条件で要素を検索するときに使う。

sample.js

document.querySelector(selector)
document.querySelectorAll(selector)
 //selector: セレクター一式

セレクタの一覧を出してみる。

* : すべての要素を取得
#id名 : 指定したIDの要素を取得
.class名 : 指定したクラス名の要素を取得
タグ名 : 指定したタグ名の要素を取得
セレクタ１, セレクタ２, ... : いずれかのセレクターに一致する要素を取得
parent > child : 子要素を取得
#list li : liをすべて取得
prev + next : 直後の要素を取得
prev ~ siblings : 兄弟要素をすべて取得
セレクタ名[属性値] : 指定した属性を持つ要素を取得
セレクタ名[属性値 = value] : 属性がvalueの要素を取得
セレクタ名[属性値 ^= value] : 属性がvalueから始まる要素を取得
セレクタ名[属性値 $= value] : 属性がvalueで終わる要素を取得
セレクタ名[属性値 *= value] : 属性がvalueを含む要素を取得
セレクタ名[属性][属性][属性] : 複数の属性をすべて含む要素を取得

querySelectorAll()は返り値が配列であるためlength, item(i), namedItem(name)を使える。

get~とquery~の使い分けのまとめ

特定の要素を検索できる場合　→　getメソッド
複雑に絞り込む必要がある　→　queryメソッド

参考資料

山田祥寛様　「javascript本格入門」