【JavaScript】親要素を取得する方法

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が便利です。

まとめ

• parentElement: 親要素がHTML要素である場合に使用し、シンプルな要素階層を取得できます。
• parentNode: 親要素がHTML要素以外の場合にも対応しており、より汎用的です。

どちらの方法も、DOMツリー内で親子関係を操作する際に非常に便利です。用途に応じて使い分けることで、効率的に親要素を取得できます。