dom node and html element,DOM parentNode和parentElement之间的区别
6 个答案:
答案 0 :(得分:380)
parentElement是Firefox 9和DOM4的新功能,但它已经存在于所有其他主流浏览器中。
在大多数情况下,它与parentNode相同。当节点parentNode不是元素时,唯一的区别就在于此。如果是,则parentElement为null。
举个例子:
document.body.parentNode; // the element
document.body.parentElement; // the element
document.documentElement.parentNode; // the document node
document.documentElement.parentElement; // null
(document.documentElement.parentNode === document); // true
(document.documentElement.parentElement === document); // false
由于元素(document.documentElement)没有父元素,parentElement为null。 (还有其他更不可能的情况parentElement可能是null,但您可能永远不会遇到它们。)
答案 1 :(得分:81)
在Internet Explorer中,parentElement未定义SVG元素,而parentNode已定义。
答案 2 :(得分:8)
使用.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



显然, .parentNode链接到Document。由于节点被定义为可以被文档包含,文档不能被文档包含,因此这应该被视为决策计划。
答案 3 :(得分:5)
编辑: 其中一些是错误的。有关详细信息,请参阅以下评论
所有Element个对象也是Node个对象(因为Element是Node的后代)。但是Node不是Element ... document对象。因此,您的元素具有父节点(document),但它没有父元素。
需要parentElement而不是parentNode的原因是因为HTML5并不严格要求元素,因此几乎任何元素都可以拥有父节点有一个父元素。因此,如果我的HTML页面如下所示:
My page
This is my page
This is some text from my page
Copyright, me
然后,title,header,#body和footer元素的parentNode为document,但是parentElement将为null。只有p代码才会有parentElement,即#body。 (请注意,我不建议将其作为页面结构...坚持更传统的东西。)
您可以使用以下内容复制它:
if (myElement.parentNode instanceof Element) {
myElement.parentElement = myElement.parentNode;
} else {
myElement.parentElement = null;
}
答案 4 :(得分:3)
与nextSibling and nextElementSibling一样,请记住,名称中包含“element”的属性始终返回Element或null。没有属性可以返回任何其他类型的节点。
console.log(document.body.parentNode, "is body's parent node"); // returns
console.log(document.body.parentElement, "is body's parent element"); // returns
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
答案 5 :(得分:0)
还有另一个区别,但仅在Internet Explorer中。当您混合使用HTML和SVG时会发生这种情况。如果父级是这两个的“其他”,则.parentNode给出父级,而.parentElement给出未定义。
dom node and html element,DOM parentNode和parentElement之间的区别相关推荐
- centos安装 php时 出现 make: *** [ext/dom/node.lo] Error
为什么80%的码农都做不了架构师?>>> Linux安装PHP ,make 的时候报错: make: *** [ext/dom/node.lo] Error 1 解决办法: $ ...
- java dom 解析xml 例子,Java DOM解析XML的幾個例子
Sample1: 1:新建XML文檔 books.xml,放到項目的根目錄下. xmlns="http://test.org/books"> Thinking in JAVA ...
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
- java创建node类型数据类型_[Java教程]js DOM Node类型
[Java教程]js DOM Node类型 0 2015-12-18 16:00:08 DOM(文档对象模型)是针对HTML和 DOM可以将任何HTML或 以下面为例: My article Hell ...
- XML DOM Node List
节点列表由 getElementsByTagName() 方法和 childNodes 属性返回. 实例 下面的例子使用 XML 文件 books.xml. 函数 loadXMLDoc(),位于外部 ...
- [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别
要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...
- 动态修改dom node的两种方法性能比较
Created by Jerry Wang, last modified on Sep 25, 2014 测试代码: <html> <script src="C:\User ...
- html dom firstchild,DOM Node对象属性firstChild
DOM Node对象属性firstChild指定节点的第一个子节点. 语法 以下是firstChild属性的使用语法. nodeObject.firstChild 示例 文件:node.xml 的内容 ...
- dom html api,JavaScript常用DOM的API
在介绍DOM的API之前,先介绍下一些DOM基本概念. DOM,文档对象模型,把文档树当成对象来看的模型. DOM 是 JavaScript 操作网页的接口,全称为"文档对象模型" ...
最新文章
- 微信 request 合法域名校验出错
- 二分图专题系列各大知识点总结(匈牙利,染色法,最大独立集,最小点覆盖,最小路径覆盖)
- 5.数据绑定和表单标签库
- 【PAT乙级】1083 是否存在相等的差 (20 分)
- Ajax基于rest风格上传图片
- unittest-读取yaml文件
- OK6410开发板学习之一步一步实现精简BootLoader(BL1部分)
- ICMP报文类型和代码
- 设计模式之---解释器模式
- quicksort算法_QuickSort算法–用C,Java,Python实现
- java安装教程(eclipse)
- 社交APP市场泥沙俱下,怎能脱颖而出
- 大数据产品推荐:Stratifyd大数据智能分析平台
- python计算定积分_python 求定积分和不定积分示例
- 计算机专业sci二区论文难吗,二区SCI论文要求比国内核心高吗
- K3 CLOUD返工生产成本方案——循环计算
- Angular基本概念及用法总结
- 2048总结 python_2048游戏的python实现
- 【论文分享】ARBITRAR: User-Guided API Misuse Detection
- JAVA小白的学习总结第四周