web-dev-qa-db-ja.com

DOM parentNodeとparentElementの違い

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

javascriptfirefoxdom
394
shabunc

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になる可能性があるケースは他にもありますが、おそらくそれらに出会うことは決してないでしょう。）

381
lonesomeday

Internet Explorerでは、parentElementはSVG要素に対して未定義ですが、parentNodeは定義されています。

81
speedplane

.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は Document にリンクしています。ノードは文書に包含されるように定義され、文書は文書に包含されることができないため、文書はノードではないので、これは意思決定の失敗と見なすべきです。

8
Pacerier

編集：これのいくつかは間違っています。詳細については下記のコメントを参照してください

すべてのElementオブジェクトもNodeオブジェクトです（ElementはNodeの子孫であるため）。しかし、Node... Elementオブジェクトではないdocumentがあります。つまり、<html>要素には親ノード（document）がありますが、親要素はありません。

parentElementの代わりにparentNodeが必要なのは、HTML5が厳密に<html>要素を必要としないため、ほとんどすべての要素が実際に親要素を持たずに親ノードを持つことができるからです。私のHTMLページがこのようになっていたら：

<!doctype html>
<title>My page</title>
<header>This is my page</header>
<div id="body">
  <p>This is some text from my page</p>
</div>
<footer>
  Copyright, me
</footer>

その場合、title、header、#body、およびfooterエレメントは、それらのparentNodeをdocumentとして持ちますが、それらのparentElementはヌルになります。 pタグのみがparentElementを持ちます。これは#bodyです。 （これをページ構造としてはお勧めしません。もっと伝統的なものに固執してください。）

これを次のようにして複製できます。

if (myElement.parentNode instanceof Element) {
    myElement.parentElement = myElement.parentNode;
} else {
    myElement.parentElement = null;
}
5
Nathan MacInnes

nextSiblingおよびnextElementSibling と同様に、名前に "element"を含むプロパティは常にElementまたは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
3
Buksy