【JavaScript】element.childNodesとelement.parentNodeについて
以下のリンクをクリックすると、各セクションにジャンプできます。
element.childNodesとは
element.childNodesは、指定した要素（element）のすべての子ノードをリストとして返すプロパティです。このリストはNodeListという形式で提供され、リアルタイムでDOMツリーを反映します。つまり、DOMが変更されるとNodeListも即座に更新されます。
子ノードには以下が含まれます：
- 子要素ノード（
Element） - テキストノード（
Text） - コメントノード（
Comment）
このプロパティを使うと、子ノードを順番に処理したり、特定の種類のノードを取得できます。
element.parentNodeとは
element.parentNodeは、指定した要素（element）の親ノードを返すプロパティです。親ノードは、DOMツリーにおける現在の要素の一段上のノードに相当します。
主な特性：
- 親ノードが存在しない場合（ルートノードなど）、
nullを返します。 - HTMLドキュメントの場合、
document.documentElement（通常は<html>タグ）が最上位ノードになります。
これを利用して、要素の階層構造を遡ったり、特定の親要素を操作することができます。
具体的な例
以下は、element.childNodesとelement.parentNodeの使用例です。
childNodesの例
// HTML構造 // <div id="example"> // Hello // <p>World</p> // <!-- コメント --> // </div> const div = document.getElementById("example"); const childNodes = div.childNodes; childNodes.forEach(node => { console.log(node); // テキストノード,
, コメントノードが順に出力される });
parentNodeの例
// HTML構造 // <div id="example"> // <p id="child">Hello</p> // </div> const child = document.getElementById("child"); const parent = child.parentNode; console.log(parent); //
childNodesとフィルタリング
childNodesにはすべての種類のノードが含まれるため、子要素ノードだけを取得するにはフィルタリングが必要です。
const div = document.getElementById("example");
const elementChildren = Array.from(div.childNodes).filter(node => node.nodeType === Node.ELEMENT_NODE);
console.log(elementChildren); // 子要素ノードのみ出力される
利用シーンと注意点
element.childNodesとelement.parentNodeの一般的な利用シーンには以下が挙げられます。
childNodesの利用シーン
- ノードリストを取得してすべての子ノードを操作したい場合。
- DOMツリーを解析し、特定のノードを見つけ出したい場合。
- コメントやテキストを含むすべてのノードにアクセスする必要がある場合。
parentNodeの利用シーン
- 要素の親要素を取得してスタイルを変更したい場合。
- 要素を別の親要素に移動させたい場合。
- 親要素を確認して構造上の関係を把握したい場合。
注意点
childNodesにはテキストやコメントノードも含まれるため、用途に応じてフィルタリングが必要です。parentNodeがnullを返す場合があるため、事前に確認が必要です。
これらのプロパティを活用することで、DOMツリーを効率よく操作し、より柔軟なWebアプリケーションの開発が可能になります。