【8/27まで】Udemyの人気コースが今なら1,200円から!!

【JavaScript入門】子ノードを順次処理するfirstElementChildとnextElementSiblingの使い方

【JavaScript入門】子ノードを順次処理するfirstElementChildとnextElementSiblingの使い方

firstElementChildプロパティ
親要素配下の最初の子要素(先頭の子要素)を取得することができます。
nextElementSiblingプロパティ
次の兄弟要素を取得することができます。
戻り値が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.firstElementChild;

while(child){

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

    //次の要素を取得。
    child = child.nextElementSibling;
}

実行結果

Google
Yahoo
Amazon

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です