DOM parentNode和parentElement的区别

小开

最佳答案

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

小开

在Internet Explorer中，parentElement对于SVG元素是未定义的，而parentNode是定义的。

小开

就像使用nextSibling和nextElementSibling一样，只要记住，带有"element"在他们的名字中总是返回Element或null。属性，可以返回任何其他类型的节点。

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


var html = document.body.parentElement;
console.log(html.parentElement, "is html's parent element");         //null
console.log(html.parentNode, "is html's parent node");               //document

小开

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

如果你使用文档片段，那么你需要.parentNode:

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

另外:

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

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

Apparently the <html>'s .parentNode links to the Document. This should be considered a decision phail as documents aren't nodes since nodes are defined to be containable by documents and documents can't be contained by documents.

小开

还有一个不同之处，但仅限于ie浏览器。混合HTML和SVG时会出现这种情况。如果父节点是这两个节点中的“另一个”，则. parentnode给出父节点，而. parentelement给出undefined。