DOM parentNodeとparentElementの違い

501

誰かが私をできるだけ簡単に説明できますか？古典的なDOM parentNodeとFirefox 9で新しく導入されたparentElementの違いは何ですか？

javascript  firefox  dom 
— Shabunc
ソース
4
parentNodeはDOM標準のようですので、parentElementの代わりに常に使用する方が安全です。
— TMS
5
@TMS w3schoolは権威ではありません：w3fools.com
— GuillaumeMassé15年

回答:

487

parentElement はFirefox 9とDOM4の新機能ですが、他のすべての主要なブラウザに古くから存在していました。

ほとんどの場合、と同じparentNodeです。唯一の違いは、ノードparentNodeが要素でない場合です。もしそうなら、parentElementですnull。

例として：

document.body.parentNode; // the <html> element
document.body.parentElement; // the <html> element

document.documentElement.parentNode; // the document node
document.documentElement.parentElement; // null

(document.documentElement.parentNode === document);  // true
(document.documentElement.parentElement === document);  // false

以来<html>要素は（document.documentElement）要素である親を持たない、parentElementですnull。（可能性のあるケースは他にもありますparentElementがnull、に遭遇することはないでしょう。）

— 寂しい
ソース
162
つまり、時間の99.999999999999％は完全に無意味です。誰の考えだったの？
— Niet the Dark Absol '31 / 12/31
25
オリジナルparentElementはIE独自のものでした。当時、他のブラウザ（例：Netscape）はサポートされているparentNodeがサポートされていないと考えていparentElementます。（明らかに、Netscapeについて言及したので、IE5以前に戻る方法について話している...）
— nnnnnn
9
@lonesomedayあなたが忘れてしまったdocumentfragment.firstChild.parentElement === null
— レイノス
7
@Raynosそれは実際に私の答えの最後の文で私が考えていた正確な状況でした...
— lonesomeday
17
私が発見したばかりのように、SVG要素（のcircle内部などg）では、IEはparentElement未定義であり、parentNodeあなたが探しているものになります。:(
— Jason Walton
94

Internet Explorerでは、parentElementSVG要素については未定義ですが、parentNodeは定義されています。

— スピードプレーン
ソース
10
正直なところ、これは答えというよりはコメントだと思います。
— shabunc
38
たぶん、それがわかったまで、テーブルに頭を1時間以上ぶつけたのはそのためです。同様のヘッドバンギングの後で、他の多くの人がこのページにアクセスすると思います。
— スピードプレーン2016
3
@speedplane嬉しいこれは論理的な意味がなく、しばらくの間私を
— 困ら
1
コメントノードに対しても未定義です。Chromeではコメントの親を喜んで取得していましたが、IEでは未定義でした。
— Simon_Weaver
そのソースが見つかりませんでした。parentElement以下のために実装されていないNodeだけでなく（知っているdeveloper.mozilla.org/en-US/docs/Web/API/Node/...をするために）が、SVGElement？またdocument.createElement('svg').parentElement、IE 11.737.17763.0ではこれを再現できませんでした。その間、これはおそらく修正されましたか？
— イプシロン
14

使用して.parentElement、ドキュメントのフラグメントを使用していない限り、問題が発生することはありません。

ドキュメントフラグメントを使用する場合は、次のものが必要です.parentNode。

let div = document.createDocumentFragment().appendChild(document.createElement('div'));
div.parentElement // null
div.parentNode // document fragment

また：

let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment
<template id="t"><div></div></template>
スニペットを展開

どうやらのドキュメントへ<html>の.parentNodeリンク。ノードはドキュメントに含まれるように定義されており、ドキュメントはドキュメントに含まれることができないため、ドキュメントはノードではないため、これは決定の失敗と考える必要があります。

— パチェリエ
ソース
6

nextSiblingおよびnextElementSiblingと同様に、名前に "element"が含まれるプロパティは常にElementorを返すことに注意してくださいnull。なしのプロパティは、他の種類のノードを返すことができます。

console.log(document.body.parentNode, "is body's parent node");    // returns <html>
console.log(document.body.parentElement, "is body's parent element"); // returns <html>

var html = document.body.parentElement;
console.log(html.parentNode, "is html's parent node"); // returns document
console.log(html.parentElement, "is html's parent element"); // returns null
— ブクシー
ソース
1
そうですが、次の兄弟とは異なり、テキストやコメントのノードを親にすることはできません。
— Jasen
0

もう1つ違いがありますが、これはInternet Explorerのみです。HTMLとSVGを混在させると発生します。親がこれら2つの「その他」の場合、.parentNodeは親を与え、.parentElementは未定義を与えます。

— mathheadinclouds
ソース
1
そうでundefinedはないと思いますnull。
— ブライアンディパルマ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.