どうも、イソップです。
DOMについての連載第5回目です。
今回はDOMの取得とあわせて知っておくと便利な、「親・子・兄弟ノード」について紹介します。
親、子、兄弟
Elementオブジェクトは親、子、兄弟関係にあたるノードへの参照を持っています。
それぞれオブジェクトのプロパティからアクセスすることが出来ます。
parentNode
親ノードを取得することが出来ます。
var page = document.getElementById('page');
var parent = page.parentNode;
childNodes
子ノードリストを取得することが出来ます。
var page = document.getElementById('page');
var childs = page.childNodes;
NodeListオブジェクトが取得される点に注意してください。
firstChild
最初の子ノードを取得することが出来ます。
var page = document.getElementById('page');
var firstChild = page.firstChild;
lastChild
最後の子ノードを取得することが出来ます。
var page = document.getElementById('page');
var lastChild = page.lastChild;
nextSibling
次のノードを取得することが出来ます。
var page = document.getElementById('page');
var next = page.nextSibling;
previousSibling
ひとつ前のノードを取得することが出来ます。
var page = document.getElementById('page');
var prev = page.previousSibling;
ノードを取得する点に注意
実は、空白文字もノードです。改行文字やコメントももちろん、ノードになります。
上記で説明したプロパティは、ノードを参照しているため、自分が意図した要素を選択したと思っても、空白文字である可能性があります。
HTMLのタグは、改行やインデントを入れて、コードを見やすくするために整形しますが、
DOMを取得する際には注意が必要です。
空白文字・コメントノードを除いた、親、子、兄弟要素を取得する
普通に考えてみてください。要素が空白文字かどうかを毎回判別するのは大変ですし、現実的ではありません。
でも安心してください。DOMには空白文字などのテキストノードを除去した「要素」を取得するAPIが用意されています。
children
子要素のリストを取得します。
var page = document.getElementById('page');
var children = page.children;
firstElementChild
最初の子要素を取得します。
var page = document.getElementById('page');
var firstChild = page.firstElementChild;
lastElementChild
最後の子要素を取得します。
var page = document.getElementById('page');
var lastChild = page.lastElementChild;
nextElementSibling
次の要素を取得します。
var page = document.getElementById('page');
var next = page.nextElementSibling;
previousElementSibling
ひとつ前の要素を取得します。
var page = document.getElementById('page');
var prev = page.previousElementSibling;
childElementCount
子要素の数を取得します。
var page = document.getElementById('page');
var elementCount = page.childElementCount;
これは Element Traversal API という仕様です。
これを使っておけば間違いありませんね。
次回に続きます。
