parentNodeとparentElementの違いは？

 

HTMLにおける「parentNode」と「parentElement」の違い

HTMLのDOM (Document Object Model) を扱う際によく遭遇するプロパティに、「parentNode」と「parentElement」があります。どちらも一見似たような役割を持つように見えますが、実際には明確な違いがあります。

ノードと要素の違い

「parentNode」と「parentElement」の違いを理解するには、まず「ノード」と「要素」の違いを理解する必要があります。

  • ノード (Node): DOMツリーを構成する基本的な構成要素です。要素、テキスト、コメントなど、様々な種類があります。
  • 要素 (Element): HTMLタグによって定義される、DOMツリーの一部です。属性を持つことができ、他のノード（要素を含む）を含めることができます。つまり、「要素」は「ノード」の一種ということになります。

parentNode プロパティ

parentNode プロパティは、任意のノードの親ノードを返します。これは、要素、テキストノード、コメントノードなど、あらゆる種類のノードに対して使用できます。

例えば、以下のHTMLを考えてみましょう。

<div>
    <p>段落テキスト</p>
</div>

このHTMLにおける各ノードの parentNode は以下のようになります。

ノード parentNode
<div> document
<p> <div>
段落テキスト <p>

parentElement プロパティ

parentElement プロパティは、要素の親要素のみを返します。もしノードが要素でない場合（テキストノードやコメントノードなど）、parentElement は null を返します。

先ほどのHTMLを例に、parentElement を見てみましょう。

ノード parentElement
<div> document.body
<p> <div>
段落テキスト null

いつ何を使うべきか

基本的には、要素の親要素を取得したい場合は parentElement を、任意のノードの親ノードを取得したい場合は parentNode を使用します。

しかし、以下の点に注意が必要です。

  • parentElement は、要素が直接documentに接続されていない場合（例えば、<script> 要素の親要素を取得しようとした場合など）、null を返すことがあります。
  • parentNode は、常に何らかのノードを返します。もし親ノードが存在しない場合は、document を返します。

コード例

以下は、parentNode と parentElement の使用例です。

<html>
<body>
    <div id="container">
        <p id="text">Hello World</p>
    </div>
    <script>
        var textNode = document.getElementById('text');
        console.log(textNode.parentNode);  // 出力: <div id="container">
        console.log(textNode.parentElement);  // 出力: <div id="container">
    </script>
</body>
</html>

参考文献

よくある質問

Q1: parentElement が null を返すのはどんな時ですか？

A1: 要素が直接documentに接続されていない場合、例えば、<script> 要素の親要素を取得しようとした場合などです。また、まだDOMに追加されていない要素の場合も null を返します。

Q2: parentNode と parentElement のどちらを使うべきですか？

A2: 基本的には、要素の親要素を取得したい場合は parentElement を、任意のノードの親ノードを取得したい場合は parentNode を使用します。

Q3: parentNode と parentElement は、jQueryではどのように使われますか？

A3: jQueryでは、 .parent() メソッドを使用して親要素を取得します。これは parentElement と同様に動作します。 parentNode に相当するメソッドはありません。

その他の参考記事:HTML DOM HTML コンテンツを変更する