dom node and html element,DOM parentNode和parentElement之间的区别

6 个答案:

答案 0 :(得分：380)

parentElement是Firefox 9和DOM4的新功能，但它已经存在于所有其他主流浏览器中。

在大多数情况下，它与parentNode相同。当节点parentNode不是元素时，唯一的区别就在于此。如果是，则parentElement为null。

举个例子：

document.body.parentNode; // the element

document.body.parentElement; // the element

document.documentElement.parentNode; // the document node

document.documentElement.parentElement; // null

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

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

由于元素(document.documentElement)没有父元素，parentElement为null。 (还有其他更不可能的情况parentElement可能是null，但您可能永远不会遇到它们。)

答案 1 :(得分：81)

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

答案 2 :(得分：8)

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

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

let div = document.createDocumentFragment().appendChild(document.createElement('div'));

div.parentElement // null

div.parentNode // document fragment

此外：

＆＃13;

＆＃13;

let div = document.getElementById('t').content.firstChild

div.parentElement // null

div.parentNode // document fragment＆＃13;

＆＃13;＆＃13;＆＃13;

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

答案 3 :(得分：5)

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

所有Element个对象也是Node个对象(因为Element是Node的后代)。但是Node不是Element ... document对象。因此，您的元素具有父节点(document)，但它没有父元素。

需要parentElement而不是parentNode的原因是因为HTML5并不严格要求元素，因此几乎任何元素都可以拥有父节点有一个父元素。因此，如果我的HTML页面如下所示：

My page

This is my page

This is some text from my page

Copyright, me

然后，title，header，#body和footer元素的parentNode为document，但是parentElement将为null。只有p代码才会有parentElement，即#body。 (请注意，我不建议将其作为页面结构...坚持更传统的东西。)

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

if (myElement.parentNode instanceof Element) {

myElement.parentElement = myElement.parentNode;

} else {

myElement.parentElement = null;

}

答案 4 :(得分：3)

与nextSibling and nextElementSibling一样，请记住，名称中包含“element”的属性始终返回Element或null。没有属性可以返回任何其他类型的节点。

console.log(document.body.parentNode, "is body's parent node"); // returns

console.log(document.body.parentElement, "is body's parent element"); // returns

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

答案 5 :(得分：0)

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