DOM Elementの検索と走査を標準APIでどこまでできるか調べました。
脱jQueryを目指しています。
検索
querySelectorAll
原則としてdocument.querySelectorAllを使います。
引数にはCSSセレクタを指定できます。カンマで区切って複数つけることもできます。
たとえば
var matches = document.querySelectorAll( "div.lightbox, div.popup" );
文書中の、 "lightbox" または "popup" のクラス名を持つすべての div 要素のノードリストを返します。
特定のelement配下を検索したい場合はelement.querySelectorAllを使います。
たとえば
var matches = document.body.querySelectorAll('p');
querySelector
要素が一個しか取れないことがわかっている場合、document.querySelectorを使っても良いです。
インデックスアクセスを省略できます。
var el = document.body.querySelector("#hoge");
element.querySelectorもあります。
走査
Nodeインターフェース
DOMはツリー構造です。Nodeインターフェースには、ツリー構造の構成要素を走査するためのプロパティがあります。
Document、Element、TextNodeが本インターフェースを持ちます。
親ノード
- parentNode 親ノード
子ノード
- childNodes 子ノードの collection
- firstChild 最初の子ノード。子ノードがなければ null
- lastChild 最後の子ノード。子ノードがなければ null
兄弟ノード
- nextSibling 次のノード。なければnull
- previousSibling 前のノード。なければnull
ただし、これらのAPIではElementとTextNodeを両方を取得します。
ParentNodeインターフェース
子ノードのうち、Elementだけを取得する場合はParentNodeインターフェースのプロパティを使用します。
Element、Document、DocumentFragmentが本インターフェースを持ちます。
- children 子Elementの collection
- firstElementChild 最初の子Element。子Elementがなければ null
- lastElementChild 最後の子Element。子Elementがなければ null
NonDocumentTypeChildNodeインターフェース
兄弟ノードのうち、Elementだけを取得するにはNonDocumentTypeChildNodeインターフェースのプロパティを使います。
Element、CharacterDataが本インターフェースを持ちます。
- nextElementSibling 次のElement。なければnull
- previousElementSibling 前のElement。なければnull