Javascript DOM parentNode 和 parentElement 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8685739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between DOM parentNode and parentElement
提问by shabunc
Can somebody in explain me in as simple as possible terms, what is the difference between classical DOM parentNodeand newly introduced in Firefox 9 parentElement
有人可以用尽可能简单的术语解释我，经典 DOM parentNode和 Firefox 9 parentElement 中新引入的区别是什么
采纳答案by lonesomeday
parentElementis 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. The only difference comes when a node's parentNodeis not an element. If so, parentElementis null.
在大多数情况下，它与parentNode. 唯一的区别是当节点parentNode不是元素时。如果是，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, parentElementis null. (There are other, more unlikely, cases where parentElementcould be null, but you'll probably never come across them.)
由于<html>元素 ( document.documentElement) 没有作为元素的父元素，因此parentElement是null。（还有其他更不可能的情况parentElement可能是null，但您可能永远不会遇到它们。）
回答by speedplane
In Internet Explorer, parentElementis undefined for SVG elements, whereas parentNodeis defined.
在 Internet Explorer 中，parentElement对于 SVG 元素未定义，而已parentNode定义。
回答by Pacerier
Use .parentElementand 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 .parentNodelinks to the Document. This should be considered a decision phail as documents aren't nodes since nodes are definedto be containable by documents and documents can't be contained by documents.
显然是指向文档<html>的.parentNode链接。这应该被视为一个决定因素，因为文档不是节点，因为节点被定义为可被文档包含而文档不能被文档包含。
回答by Buksy
Just like with nextSibling and nextElementSibling, just remember that, properties with "element" in their name always returns Elementor null. Properties without can return any other kind of node.
就像nextSibling 和 nextElementSibling 一样，请记住，名称中带有“element”的属性总是返回Elementor null。没有的属性可以返回任何其他类型的节点。
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
回答by mathheadinclouds
there is one more difference, but only in internet explorer. It occurs when you mix HTML and SVG. if the parent is the 'other' of those two, then .parentNode gives the parent, while .parentElement gives undefined.
还有一个区别，但仅限于 Internet Explorer。当您混合 HTML 和 SVG 时会发生这种情况。如果父节点是这两者中的“另一个”，则 .parentNode 给出父节点，而 .parentElement 给出未定义。
