DOMを再入門して理解を深める 【取得編3】

スポンサーリンク

どうも、イソップです。

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 という仕様です。
これを使っておけば間違いありませんね。

次回に続きます。

スポンサーリンク