ノードの子・親・兄弟ノードを取得
【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
【すべての子ノードを取得する】
Document オブジェクトの getElementById メソッドや querySelector メソッドなどを使って要素ノードを取得したあと、 Node オブジェクトの childNodes プロパティを参照することで、このノードの 1 つ下の階層にある子ノードをすべて取得することができます。
・書式
node.childNodes
このプロパティは参照専用です。戻り値として NodeList オブジェクトを返します。
NodeList オブジェクトは複数のノードの集合です。 NodeList オブジェクトでは length プロパティと item メソッドが用意されており、次のように取得したノードの数を取得したり、取得したノードを取り出すことができます。
let element = document.getElementById('main');
let children = element.childNodes;
// 取得したノードの数を取得
let len = children.length;
// インデックスを指定して Node オブジェクトを取得
let element = children.item(0);
// 次の形式でもインデックスを指定して Node オブジェクトを取得
let element = children[0];
子ノードが複数あった場合、 HTML ページの中で記述された順番にインデックスが割り当てられています。インデックスは最初が 0 で 1, 2, 3... と続いていきます。子ノードが見つからなかった場合、 childNodes プロパティは length が 0 の NodeList オブジェクトを返します。
「ボタン」をクリックする
id 属性の値が box の div 要素には p 要素が 2 つ含まれているだけですが、「空白ノード」で解説したようにノードとして取得する場合は HTML 文の記述の仕方によっては空白ノードが含まれます。今回も p 要素の前後に空白ノードが含まれるため子ノードは全部で 5 つになっています。
