ノードの子・親・兄弟ノードを取得--2

最初の子ノードと最後の子ノードを取得する

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、

【最初の子ノードと最後の子ノードを取得する】

1，firstChild プロパティ
このノードの 1 つ下の階層にある子ノードの中の最初のノードを取得することが出来る。
書式；node.firstChild

2，lastChildプロパティ】
このノードの 1 つ下の階層にある子ノードの中の最後のノードを取得することが出来る。
書式；node.lastChild

これらの戻り値として Node オブジェクトを返します。子ノードがなかった場合は null が返ります。

例えば特定のノードの子ノードの中で最初と最後の子ノードを取得するには次のように記述します。

let element = document.getElementById('main');
let first = element.firstChild;
let last = element.lastChild;

【同じ階層の次のノードと前のノードを取得する】
3，nextSibling プロパティ
このノードと同じ階層にある次のノードを取得することができます。

書式；node.nextSibling

このプロパティは参照専用です。戻り値として Node オブジェクトを返します。子ノードがなかった場合は null が返ります。

4， previousSibling プロパティ
このノードと同じ階層にある一つ前のノードを取得することができます。

書式：node.previousSibling

このプロパティは参照専用です。戻り値として Node オブジェクトを返します。子ノードがなかった場合は null が返ります。

例えば特定のノードの同じ階層にある次のノードと一つ前のノードを取得するには次のように記述します。

let element = document.getElementById('main');
let next = element.nextSibling;
let prev = element.previousSibling;

サンプル

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞nextSibling,previousSibling＜/title＞

＜/head＞

＜body＞

＜p＞今日は外でランチを食べました＜/p＞

＜div id="box"＞

    ＜!-- お店の情報 --＞

    ＜p＞場所：港区南青山＜/p＞

    ＜p＞店名：リストランテ南青山＜/p＞

＜/div＞

＜button onClick="getElements(1);"＞要素を取得(前から後)＜/button＞

＜button onClick="getElements(2);"＞要素を取得(後から前)＜/button＞

＜script＞

function getElements(direct){

    let element = document.getElementById('box');

    if (direct == 1){

        let child = element.firstChild;

        while (child){

            console.log(child.nodeName);

            child = child.nextSibling;

        }

    }else{

        let child = element.lastChild;

        while (child){

            console.log(child.nodeName);

            child = child.previousSibling;

        }

    }

}

＜/script＞

＜/body＞

＜/html＞

ブラウザを立ち上げる

左ボタンをクリック

 id 属性の値が box の要素ノードを取得したあと、要素ノードの最初の子ノードを取得します。そして同じ階層のノードを前から後ろに向かって順に取得していきます。取得したノードはノードの名前を出力しています。

 

注意）p 要素の前後にある空白や改行、タブなどの連続する空白文字は一つの空白ノードとして扱われます。(空白ノードはテキストノードのひとつです)。

 

次に右ボタンを押す

id 属性の値が box の要素ノードを取得したあと、要素ノードの最後の子ノードを取得します。そして同じ階層のノードを後ろから前に向かって順に取得していきます。取得したノードはノードの名前を出力しています。

以上

 

【親ノードを取得する】
Node オブジェクトの parentNode プロパティを参照することで、このノードの親ノードを取得することができます。

書式；node.parentNode

このプロパティは参照専用です。戻り値として Node オブジェクトを返します。 Document ノードの親ノードを取得した場合は null が返ります。

 

サンプル

＜!DOCTYPE html＞

＜html lang="ja"＞

＜head＞

＜meta charset="UTF-8"＞

＜title>parentNode

＜/head＞

＜body＞

＜p＞今日は外でランチを食べました＜/p＞

＜div＞

    ＜!-- お店の情報 --＞

    ＜p＞場所：港区南青山＜/p＞

    ＜p id="shop"＞店名：リストランテ南青山＜/p＞

＜/div＞

＜button onClick="getElements();"＞要素を取得＜/button＞

＜script＞

function getElements(direct){

    let element = document.getElementById('shop');

    let parent = element.parentNode;

    while (parent){

        console.log(parent.nodeName);

        parent = parent.parentNode;

    }

}

＜/script＞

＜/body＞

＜/html＞

 

表示されたボタンをクリックすると、 id 属性の値が shop の要素ノードを取得したあと、順に親ノードを取得していきます。取得したノードはノードの名前を出力しています。

以上