Categories: JavaScript

【JavaScript入門】子ノードを降順処理するlastChildとpreviousSiblingの使い方

lastChildプロパティ

親要素配下の最後の子ノード(末尾の子ノード)を取得することができます。

previousSiblingプロパティ

手前の兄弟ノードを取得することができます。

HTML

<div id="aaa">
    <div>Google</div>
    <div>Yahoo</div>
    <div>Amazon</div>
</div> 

js

//親要素を取得
let parent = document.getElementById('aaa');

//親要素配下の最後の子ノードを取得。
let child = parent.lastChild;

while(child){

    if(child.nodeType===1){
        //テキストを出力。
        console.log(child.textContent);
    }  
    //手前のノードを取得。
    child = child.previousSibling;
}

結果

Amazon
Yahoo
Google

nodeTypeとは

lastChildpreviousSiblingで取得したノードには要素以外のノードも含まれています。
そのためノードの種類を判定して処理を行う必要があります。

戻り値 意味
1 要素ノード
2 属性ノード
3 テキストノード
4 CDATAセクション
5 実体参照ノード
6 実体宣言ノード
7 処理命令ノード
8 コメントノード
9 文書ノード
10 文書型宣言ノード
11 文書の断片(フラグメント)
12 記法宣言ノード

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp