有人可以简单解释一下，经典的DOM parentNode和Firefox 9 parentElement 中新引入的有什么区别
DOM parentNode 和 parentElement 的区别
IT技术
javascript
firefox
dom
2021-01-18 16:48:10
5个回答
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定义。
使用.parentElement你不是使用文档片段，你不能出错，只要。
如果您使用文档片段，那么您需要.parentNode：
let div = document.createDocumentFragment().appendChild(document.createElement('div'));
div.parentElement // null
div.parentNode // document fragment
还：
let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment<template id="t"><div></div></template>显然是指向文档<html>的.parentNode链接。这应该被视为一个决定因素，因为文档不是节点，因为节点被定义为可被文档包含而文档不能被文档包含。
就像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
还有一个区别，但仅限于 Internet Explorer。当您混合 HTML 和 SVG 时会发生这种情况。如果父节点是这两者中的“另一个”，则 .parentNode 给出父节点，而 .parentElement 给出未定义。
其它你可能感兴趣的问题