Question

有人可以用尽可能简单的术语来解释我，经典DOM parentNode与Firefox 9中新引入的parentElement之间有什么区别

Answer 1

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

Answer 2

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

Answer 3

使用.parentElement，只要您没有使用文档片段，就不会出错。

如果您使用文档片段，则需要.parentNode：

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

此外：

＆＃13;

let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment

＆＃13;

<template id="t"><div></div></template>

＆＃13;

显然，<html> .parentNode链接到Document。由于节点被定义为可以被文档包含，文档不能被文档包含，因此这应该被视为决策计划。

Answer 4

编辑： 其中一些是错误的。有关详细信息，请参阅以下评论

所有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将为null。只有p代码才会有parentElement，即#body。（请注意，我不建议将其作为页面结构...坚持更传统的东西。）

您可以使用以下内容复制它：

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

Answer 5

与nextSibling and 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

Answer 6

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

DOM parentNode和parentElement之间的区别

6 个答案: