DOM parentNode和parentElement的区别

有人能简单解释一下，经典的DOM parentNode和Firefox 9中新引入的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为空。(还有其他更不可能的情况，parentElement可能为null，但您可能永远不会遇到它们。)

2011-12-31 01:58:33

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

2016-03-28 20:13:50

就像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的父节点”);/ /文档

2017-08-31 09:02:34

使用. 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链接到文档。这应该被认为是一个决策费尔，因为文档不是节点，因为节点被定义为文档包含，而文档不能被文档包含。

2017-09-28 15:22:07

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

2019-10-01 01:16:13

DOM parentNode和parentElement的区别

推荐文章

最新文章

标签