JavaScriptでは、指定した要素の親要素を取得する方法として、parentElementおよびparentNodeプロパティを使用します。この記事では、これらのプロパティを使って親要素を取得する方法について詳しく解説します。
parentElementプロパティを使った親要素の取得
parentElementプロパティは、指定した要素の親要素（HTML要素）を取得するための方法です。通常、parentElementは、要素がHTML要素である場合に使用されます。
let childElement = document.getElementById('child');
let parentElement = childElement.parentElement;
console.log(parentElement); // 親要素が出力される
この例では、IDがchildである要素の親要素を取得しています。parentElementを使用することで、HTML要素が返され、親要素を簡単に操作することができます。
parentNodeプロパティを使った親要素の取得
parentNodeプロパティは、parentElementと同様に親要素を取得するために使用されますが、parentNodeは親要素がHTML要素以外のノード、たとえばテキストノードや他のノードも取得可能です。
let childElement = document.getElementById('child');
let parentNode = childElement.parentNode;
console.log(parentNode); // 親ノードが出力される
この例では、parentNodeを使用して親ノードを取得しています。通常はparentElementが使われることが多いですが、HTML要素以外のノードにもアクセスしたい場合にはparentNodeが便利です。
よくある質問（FAQ）
Q. JavaScriptでページ内の全てのh2要素を取得するには？
A. document.querySelectorAll(“h2”)でHTMLCollectionが取得できます。Array.from()またはスプレッド演算子で配列に変換するとforEachやmapなどが使えます。
Q. 特定の親要素内の要素のみ取得するには？
A. parentElement.querySelectorAll(“.target”)で親要素内に限定した検索ができます。document全体でなく特定のコンポーネント内に絞って要素を取得する際に便利です。
Q. classとidで要素を取得する方法の速度差は？
A. getElementById()がgetElementsByClassName()やquerySelectorより速いとされますが、現代のブラウザではほぼ差がありません。可読性とコードの一貫性を優先して選択してください。
まとめ
- parentElement: 親要素がHTML要素である場合に使用し、シンプルな要素階層を取得できます。
- parentNode: 親要素がHTML要素以外の場合にも対応しており、より汎用的です。
どちらの方法も、DOMツリー内で親子関係を操作する際に非常に便利です。用途に応じて使い分けることで、効率的に親要素を取得できます。