DOM parentNode和parentElement之间的区别

2020/09/25 02:21 · javascript ·  · 0评论

有人可以用尽可能简单的方式解释我吗,经典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>element(document.documentElement)没有作为元素的父元素,因此parentElementis 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”的属性始终返回Elementnull没有的属性可以返回任何其他类型的节点。

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给出未定义。

本文地址:http://javascript.askforanswer.com/dom-parentnodeheparentelementzhijiandequbie.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!