有人能简单解释一下,经典的DOM parentNode和Firefox 9中新引入的parentElement之间有什么区别吗
当前回答
就像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的父节点”);/ /文档
其他回答
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,但您可能永远不会遇到它们。)
在Internet Explorer中,对于SVG元素,parentElement是未定义的,而parentNode是定义的。
还有一个不同之处,但仅限于ie浏览器。混合HTML和SVG时会出现这种情况。如果父节点是这两个节点中的“另一个”,则. parentnode给出父节点,而. parentelement给出undefined。
就像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的父节点”);/ /文档
使用. 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链接到文档。这应该被认为是一个决策费尔,因为文档不是节点,因为节点被定义为文档包含,而文档不能被文档包含。
推荐文章
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- React不会加载本地图像
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- JavaScript变量声明在循环外还是循环内?
- 元素在“for(…in…)”循环中排序
- 在哪里放置JavaScript在HTML文件?
- 什么时候.then(success, fail)被认为是承诺的反模式?
- 从浏览器下载JSON对象作为文件