Categories: JavaScript

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

lastElementChildプロパティ

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

previousElementSiblingプロパティ

手前の兄弟要素を取得することができます。

戻り値がElement(要素)に限定されるため、nodeTypeを判定することなく処理することが出来ます。

HTML

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

js

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

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

while(child){

    //テキストを出力。
    console.log(child.textContent);

    //手前の要素を取得。
    child = child.previousElementSibling;
}

実行結果

Amazon
Yahoo
Google

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

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

issiki_wp