Jump to the content

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

JavaScript

    どうも、イソップです。

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

    次回に続きます。

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×