DOMノードの取得方法メモ書き

内容

javascript, jQuery において，DOM要素の取得方法のメモ書き．

テストしてないものあり．
テストしたものは，Firefox40.0 でのみ．環境によっては書いてるとおりにならないかも．
jQuery のバージョンは 2.1.4

javascriptにて

関連

function	引数の形式	戻り値	戻り値の型
document.getElementById(id)	id属性の文字列 (id)	idをid属性に持つ最初の要素	Node
element.getElementsByClassname(class)1	class属性の文字列 (class)．スペースで区切って複数指定できる．	elementの子孫要素でclassの全てをclass属性に持つ要素のリスト	NodeList2
element.getElementsByTagName(tag)	tag名の文字列 (tag)	elementび子孫要素でtagである要素のリスト	NodeList
element.querySelector(selector)3	cssセレクタ文字列 (selector)	elementの子要素でselectorにマッチする最初の要素	Node
element.querySelectorAll(selector)3	cssセレクタ文字列 (selector)	elementの子要素でselectorにマッチする要素のリスト	Nodeの配列

jQueryにて

jQuery オブジェクトの取得について (多分こんな感じ)

下の表の方法を使って要素を取得した場合，jQueryオブジェクトとして取得される．
要素は，取得したオブジェクトの数値インデックスのプロパティにDOMノードとして格納される．
例えば要素が一つだけなら，取得したjQueryオブジェクト[0]にそのDOMノードが格納される．
要素が二つなら，取得したjQueryオブジェクト[0]と取得したjQueryオブジェクト[1]にそれらのDOMノードが順に格納される．

jQueryオブジェクト取得手段 ⁴

function	引数の形式	取得される要素
$(selector[, context])	cssセレクタ文字列 (selector), documentかDOMノードかjQueryオブジェクト (context)	contextを指定した場合はその子孫要素の，そうでなければdocument内の，selectorにマッチする要素のjQueryオブジェクト
jQuery(selector[, context])	cssセレクタ文字列 (selector), documentかDOMノードかjQueryオブジェクト (context)	contextを指定した場合はその子孫要素の，そうでなければdocument内の，selectorにマッチする要素のjQueryオブジェクト
$(element)5	Node (element)	elementのjQueryオブジェクト
$(elements)5	NodeList (elements)	elementsのjQueryオブジェクト6
jQueryオブジェクト.find(selector)	cssセレクタ文字列 (selector)	jQueryオブジェクトの子孫要素でselectorにマッチする要素のjQueryオブジェクト

注意として，cssセレクタの要素を直接指定する部分⁷に id属性 を指定した場合は，規約に従わずに同じ id属性 を複数箇所で使用していた場合でも，最初の一つの要素にしかマッチしない．
しかし，cssセレクタの，求める要素の親要素を限定する部分に id属性 を指定した場合，同じ id属性 を複数箇所で使用していると，それぞれの親要素の子孫要素が検索される．
規約違反前提なので，ここは環境によって違うかも．

example.html

<div id='duplication'>
    $('#duplication') にマッチ
    <p>$('#duplication p') にマッチ</p>
</div>
<div id='duplication'>
    $('#duplication') ではマッチしない
    <p>$('#duplication p') にマッチ</p>
</div>

---

1. elementは DOMノード．documentを使っても可． ↩

2. NodeListは静的な配列ではなく，DOMの変更に応じて動的に変化する．NodeList内のNodeへのアクセスは配列へのそれとと同様． ↩

3. IEでは８以降で利用可能とのこと．ここより． ↩

4. 他にも children とか parent とか parents とかあるけど，どれもcssセレクタを使って同じように使えるし，いいや． ↩

5. DOMノードは既に取得しているのでそれへのアクセス手段ではないが，ついでに書いとく． ↩

6. getElementsByClassName()などで取得したものでも，NodeListの動的変化の性質は失われている． ↩

7. 何かいい呼び方ありませんか． ↩