Javascriptの課題で子要素から親ノードを取得したいときに多用してしまったParentElement(ParentNode)について。この二つの違いがわからなかったので調べてみました。
DOM、ノード、Elementの違い
ParentNodeとParentElementの理解の前に、DOM、ノード、Elementの関係性について理解する必要がありました。
DOM
ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現です。
つまりHTMLなどをオブジェクトで表現し、Javascript等で読み込める形にしたWeb API。
Document Object Modelの頭文字でDOM。
ノード
DOMの要素のインターフェイスになっているクラス。
DOMノードが作られて、葉っぱのようにぶら下がっているのがノード。
Element
日本語で表記すると要素。要素を表現するオブジェクトのこと。（ここにきてやっとオブジェクトが出てくる）
違いとは書いたものの、インターフェイスに違いはあるが、以下の通りDOMを使用する場合はノード=Elementという理解で問題なさそう。
DOMを使用するコードの大部分は HTML 文書の操作を中心としているため、DOM 内のノードを要素と呼ぶのが一般的ですが、厳密にはすべてのノードが要素というわけではありません。
ParentNode、ParentElementの違い
では、本題である二つのプロパティの違いですが、それぞれの意味としては下記の通りです。
ParentNode・・・特定のノードの親のノードを返す。
ParentElement・・・特定のノードの親ノードのElementを返す。
前述の通り、ノード=Elementなので全てのDOMノードが読み込まれた後であれば、結果としては同じになります。
ただし、読み込まれていないタイミングではParentElementだとNullとなってしまうことがあります。
下記のようなケースはDOMツリーの途中で処理が入るのでNullになってしまいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>JavaScript</title>
<script type="text/javascript" src="javascripts/sample.js"></script>
<!--↑ここにスクリプトが入るような場合 -->
</head>
<body>
<div>
<h1 class="title">JavaScript</h1>
<button id="btn">ターゲット</button>
<p class="display_none">クリックされました！</p>
</div>
<style>
.display_none {
display: none
}
</style>
</body>
</html>
とはいえ、基本的にはstyleタグのあとにscriptタグを入れるため、このようなケースは稀なのかなとおもっています。
以上、違いとしてはノードか要素か、どちらを取得するか違いはあるが、結果として子要素から親ノードを取得したい場合はどちらを使っても変わりはないようです。
参考文献
https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction
https://developer.mozilla.org/ja/docs/Web/API/Node
https://developer.mozilla.org/ja/docs/Web/API/Element
https://developer.mozilla.org/ja/docs/Web/API/Node/parentNode
https://developer.mozilla.org/ja/docs/Web/API/Node/parentElement