有人能简单解释一下,经典的DOM parentNode和Firefox 9中新引入的parentElement之间有什么区别吗


当前回答

就像nextSibling和nextElementSibling一样,只要记住,名称中带有“element”的属性总是返回element或null。属性,可以返回任何其他类型的节点。

console.log (document.body。parentElement, "is body's parent element") console.log (document.body。parentNode, "是body的父节点");/ / < html > var html = document.body.parentElement; console.log (html。parentElement, "是html的父元素");/ /空 console.log (html。parentNode,“是html的父节点”);/ /文档

其他回答

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为空。(还有其他更不可能的情况,parentElement可能为null,但您可能永远不会遇到它们。)

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

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

就像nextSibling和nextElementSibling一样,只要记住,名称中带有“element”的属性总是返回element或null。属性,可以返回任何其他类型的节点。

console.log (document.body。parentElement, "is body's parent element") console.log (document.body。parentNode, "是body的父节点");/ / < html > var html = document.body.parentElement; console.log (html。parentElement, "是html的父元素");/ /空 console.log (html。parentNode,“是html的父节点”);/ /文档

使用. 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) //文档片段 <模板id = " t " > < div > < / div > < /模板>


显然,<html>的. parentnode链接到文档。这应该被认为是一个决策费尔,因为文档不是节点,因为节点被定义为文档包含,而文档不能被文档包含。