DOM parentNode和parentElement之间的区别

500

有人可以用尽可能简单的方式解释我吗，经典DOM parentNode和Firefox 9 parentElement中新引入的有什么区别？

javascript firefox dom

— 沙本克
source

stackoverflow.com/questions/2899196/what-is-this-parentelement

bugzilla.mozilla.org/show_bug.cgi?id=685798

4

parentNode似乎是DOM标准，因此始终使用它而不是parentElement更安全。

— TMS

5

@TMS w3school不是权威机构：w3fools.com

— GuillaumeMassé

486

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，但您可能永远不会遇到它们。）

— 寂寞的一天
source

162

换句话说，在99.999999999999％的时间内完全没有意义。那是谁的主意？

— Niet the Dark Absol

25

原来parentElement是IE专有的东西；我认为当时支持其他浏览器（例如Netscape），parentNode但不支持parentElement。（显然，鉴于我已经提到了Netscape，我正在谈论回溯到IE5和更早版本的方法...）

— nnnnnn

9

@lonesomeday，您忘了documentfragment.firstChild.parentElement === null

— Raynos 2012年

7

@Raynos这实际上是精确的情况我脑子里对我的回答的最后一句...

— lonesomeday

17

正如我刚刚发现的那样，IE中的SVG元素（如circle内的g）parentElement将是未定义的，并且parentNode将是您要查找的内容。:(

— 杰森·沃尔顿

94

在Internet Explorer中，parentElement未定义SVG元素，而已parentNode定义。

— 速度飞机
source

10

老实说，我认为这更多是评论而不是答案。

— shabunc

38

可能是这样，但这就是我把头撞到桌子上一个小时或更长时间直到弄明白了的原因。我怀疑还有很多其他人在经历了类似的猛烈抨击之后才来到此页面。

— speedplane

3

@speedplane很高兴这是一个答案，因为这没有逻辑上的意义，让我感到难过了……

— superphonic

1

对于注释节点也未定义。在Chrome浏览器中，我很高兴获得注释的父级，但在IE中未定义。

— Simon_Weaver

我找不到该资源的来源。众所周知，parentElement不为之实施Node（developer.mozilla.org/zh-CN/docs/Web/API/Node/…），但出于SVGElement何原因？我也无法document.createElement('svg').parentElement在IE 11.737.17763.0中重现此内容。同时这是否可以解决？

— epsilon

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链接。由于文档不是节点，因此应将其视为决策重点，因为节点被定义为可包含在文档中，而文档不能包含在文档中。

— 起搏器
source

6

就像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

— 笨蛋
source

1

是的，但与兄弟姐妹的文本或注释节点不同，它不能成为父项。

— 杰森

0

还有一个区别，但仅在Internet Explorer中。当您混合使用HTML和SVG时会发生这种情况。如果父级是这两个的“其他”，则.parentNode给出父级，而.parentElement给出未定义。

— mathheadinclouds
source

1

我认为undefined不是null。

— 布莱恩·迪·帕尔玛