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がオススメ!同僚に差をつけよう!