JavaScript 親要素を取得する parentNode

概要: このチュートリアルでは、NodeオブジェクトのJavaScriptのparentNode属性を使用して、要素の親ノードを取得する方法を学びます。

parentNode属性の紹介

DOMツリー内の指定されたノードの親ノードを取得するには、parentNodeプロパティを使用します。

let parent = node.parentNode;Code language: JavaScript (javascript)

parentNodeは読み取り専用です。

DocumentノードとDocumentFragmentノードには親はありません。したがって、parentNodeは常にnullになります。

新しいノードを作成したが、DOMツリーにアタッチしていない場合、そのノードのparentNodeもnullになります。

JavaScript parentNodeの例

次のHTMLドキュメントを見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript parentNode</title>
</head>
<body>
    <div id="main">
        <p class="note">This is a note!</p>
    </div>

    <script>
        let note = document.querySelector('.note');
        console.log(note.parentNode);
    </script>
</body>
</html>
Code language: HTML, XML (xml)

次の図はコンソールでの出力を示しています。

仕組み

まず、querySelector()メソッドを使用して、.noteクラスを持つ要素を選択します。
次に、要素の親ノードを見つけます。

まとめ

node.parentNodeは、指定されたノードの読み取り専用の親ノードを返し、存在しない場合はnullを返します。
documentとDocumentFragmentには親ノードがありません。

クイズ

このチュートリアルは役に立ちましたか？