【JavaScript入門】子ノードを順次処理するfirstChildとnextSiblingの使い方
HTML
<div id="aaa">
<div>Google</div>
<div>Yahoo</div>
<div>Amazon</div>
</div>
js
//親要素を取得
let parent = document.getElementById('aaa');
//親要素配下の最初の子ノードを取得。
let child = parent.firstChild;
while(child){
if(child.nodeType===1){
//テキストを出力。
console.log(child.textContent);
}
//次のノードを取得。
child = child.nextSibling;
}
実行結果
Google
Yahoo
Amazon
firstChildとnextSiblingで取得したノードには要素以外のノードも含まれています。
そのためノードの種類を判定して処理を行う必要があります。
| 戻り値 | 意味 |
|---|---|
| 1 | 要素ノード |
| 2 | 属性ノード |
| 3 | テキストノード |
| 4 | CDATAセクション |
| 5 | 実体参照ノード |
| 6 | 実体宣言ノード |
| 7 | 処理命令ノード |
| 8 | コメントノード |
| 9 | 文書ノード |
| 10 | 文書型宣言ノード |
| 11 | 文書の断片(フラグメント) |
| 12 | 記法宣言ノード |
以上で記事の解説はお終い!
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!