本文翻译自：Difference between DOM parentNode and parentElement
有人可以用尽可能简单的方式解释我，经典DOM parentNode和Firefox 9中新引入的内容有什么区别parentElement
#1楼
参考：https://stackoom.com/question/aRYZ/DOM-parentNode和parentElement之间的区别
#2楼
在Internet Explorer中，未定义SVG元素的parentElement ，而定义了parentNode 。
#3楼
Just like with nextSibling and nextElementSibling , just remember that, properties with "element" in their name always returns Element or null . 就像使用nextSibling和nextElementSibling一样 ，请记住，名称中带有“element”的属性始终返回Element或null 。 Properties without can return any other kind of node. 没有属性可以返回任何其他类型的节点。
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
#4楼
Use .parentElement and you can't go wrong as long as you aren't using document fragments. 使用.parentElement ，只要您不使用文档片段就不会出错。
If you use document fragments, then you need .parentNode : 如果您使用文档片段，则需要.parentNode ：
let div = document.createDocumentFragment().appendChild(document.createElement('div'));
div.parentElement // null
div.parentNode // document fragment
Also: 也：
let div = document.getElementById('t').content.firstChild div.parentElement // null div.parentNode // document fragment
<template id="t"><div></div></template> Apparently the <html> 's .parentNode links to the Document . 显然， <html>的.parentNode链接到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. 这应该被视为决策计，因为文档不是节点，因为节点被定义为可由文档包含，文档不能包含文档。
#5楼
parentElement is new to Firefox 9 and to DOM4, but it has been present in all other major browsers for ages. parentElement是Firefox 9和DOM4的新功能，但它已经存在于所有其他主流浏览器中。
In most cases, it is the same as parentNode . 在大多数情况下，它与parentNode相同。 The only difference comes when a node's parentNode is not an element. 唯一的区别在于节点的parentNode不是元素。 If so, parentElement is null . 如果是，则parentElement为null 。
As an example: 举个例子：
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
Since the <html> element ( document.documentElement ) doesn't have a parent that is an element, parentElement is null . 由于<html>元素（ document.documentElement ）没有父元素，因此parentElement为null 。 (There are other, more unlikely, cases where parentElement could be null , but you'll probably never come across them.) （还有其他更不可能的情况，其中parentElement可能为null ，但您可能永远不会遇到它们。）
#6楼
Edit: Some of this is wrong. 编辑： 有些错误。 See comments below for details 请参阅以下评论了解详情
All Element objects are also Node objects (because Element is a descendent of Node ). 所有Element对象也是Node对象（因为Element是Node的后代）。 But there is a Node which isn't an Element ... the document object. 但是有一个Node不是Element ... document对象。 So your <html> element has a parent node ( document ) but it doesn't have a parent element. 所以你的<html>元素有一个父节点（ document ），但它没有父元素。
The reason that there's a need for parentElement instead of parentNode is because, HTML5 doesn't strictly require an <html> element, so almost any element can have a parent node without actually having a parent element. 需要parentElement而不是parentNode的原因是，HTML5并不严格要求<html>元素，因此几乎任何元素都可以拥有父节点，而实际上没有父元素。 So if my HTML page looked like this: 所以如果我的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>
Then the title , header , #body and footer elements would have their parentNode as document , but their parentElement would be null. 然后title ， header ， #body和footer元素将其parentNode作为document ，但它们的parentElement将为null。 Only the p tag would have a parentElement , which is #body . 只有p标签才有一个parentElement ，即#body 。 (Note that I wouldn't advise this as a page structure... stick to something more traditional.) （请注意，我不建议将其作为页面结构...坚持更传统的东西。）
You can replicate it with something like this: 您可以使用以下内容复制它：
if (myElement.parentNode instanceof Element) {
myElement.parentElement = myElement.parentNode;
} else {
myElement.parentElement = null;
}
扫一扫
2156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
