parentNode和parentElement的区别

于 2023-05-05 15:00:24 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： HTML前端 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44786530/article/details/130507153
版权
文章介绍了DOM树的概念，节点的三种类型：元素节点、文本节点和属性节点。重点对比了parentNode和parentElement属性，强调它们通常返回相同的结果，即父元素，但当查找的父节点到达文档根部document时，parentElement会返回null，而parentNode仍能显示节点信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先了解parentNode,parentElement属性之前，必须对DOM树有一定的了解。在DOM文档结构中，HTML页面每一部分都是由节点组成的，节点的类型一共有3种，元素节点，文本节点，属性节点，从图中可以看出属性节点属于元素节点的分支，一般不常考虑。

parentNode,parentElement

parentNode：顾名思义-父节点
parentElement:  顾名思义-父元素

两者在通常情况下都是一样的，因为包含元素的节点只有可能是元素节点，这里可能会有一个误区，有些人可能会想文本节点是否可以包含元素节点，来作为父节点，这里是不行的，文本节点只是文本本身，自身算一个节点，文本节点的父节点直接是元素节点。
那下面我们就说一下，parentNode,parentElement,的特例。

 这里运行结果是一致的，他们的祖宗元素都是HTML，但是我们试着想一下，再往上一层，就是根部document了，并不是元素，我们可以一起来看一下下面的代码

 执行代码如下：

这里的唯一区别就出来了，因为parentElement找的是元素，因此当找到根部document时候就是出现值为null的报错，而且parentNode找的是节点，当然就可以显示出来了！

Js中parentNode,parentElement,childNodes,children之间的区别
12-02
parentElement 获取对象层次中的父对象。  parentNode 获取文档层次中的父对象。  childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。  children 获取作为对象直接后代的 DHTML 对象的集合。  ——————————————————– parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持 ————————————————
parentNode 与 parentElement
kfepiza的博客
04-27 1087
html元素的 parentNode   是 document。html元素的 parentElement 是 null。
parentNode,parentElement 区别
热门推荐
ws_hgo的专栏
05-09 2万+
 offsetParent，parentNode,parentElement 区别 offsetParent 指与位置有关的上级元素 parentNode 指与位置无关的上级元素 parentElement 和 parentNode一样,但parentNode是W3C标准的parentElement 只在IE中可用. 第一种方法 New Document var row = -
Javascript中parentElement和parentNode的区别
weixin_42950333的博客
04-09 3025
parentNode和parentElement的区别 第一点：parentNode跟parentElement，前者是w3c标准，后者只ie支持。 parentElement是ie专用的，就是说在firefox(ff)浏览器里是不能使用的，一般情况parentNode可以取代parentElement的所有功能。 第二点： parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况。element是包含在node里的，它的nodeTy
parentElement 与 parentNode 的区别
lio-zero 的博客
11-27 953
首先，您需要知道元素和节点之间的区别。总之，元素是一种特殊类型的节点，它表示 DOM 树中的单个节点。它不仅可以是元素，还可以是注释、文档、文本节点等。 在大多数情况下，parentElement 和 parentNode 属性返回相同的节点： // 两者都返回 <html> 元素 document.body.parentNode document.body.parentElement...
深入了解parentNode,parentElement,childNodes,children的区别，一看就懂
weixin_44206561的博客
08-26 3362
今天是准备面试的第七天，js是由ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）组成，我们今天就了解下与DOM有关的常用接口parentNode,parentElement,childNodes,children。 parentNode，parentElement，childNodes和children都是对节点的操作，因此我们需要对dom树有一定的了解，在文档对象模型中，每一部分都是由节点组成（包括document都是一个节点），节点的类型一共有三种：元素节点，属性节点，文本节点，
parentnode和parentelement
03-16
parentnode和parentelement都是DOM API中的属性，用于获取当前节点的父节点。 其中，parentnode是所有节点对象都有的属性，它返回当前节点的父节点，如果当前节点没有父节点，则返回null。 而parentelement是...
js parentElement和offsetParent之间的区别
12-11
在JavaScript中，`parentElement`和`offsetParent`都是用于处理元素上下级关系的属性，但它们的作用和应用场景有所不同。本文将深入解析这两个属性的区别及其使用。 首先，`parentElement`属性是DOM层次结构的一...
parentelement与parentnode
03-16
parentElement和parentNode都是DOM API中的属性，用于获取当前节点的父节点。 其中，parentElement是Element对象的属性，只有元素节点才有该属性，返回的是当前元素节点的父元素节点。而parentNode是Node对象的属性...
parentNode和parentElement区别
hqmln的博客
04-12 2199
parentNode跟parentElement除了前者是w3c标准，后者只ie支持 当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null 一般情况parentNode可以取代parentElement的所有功能 parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为nod...
parentElement和parentNode的区别
software_developer的专栏
02-04 2056
 parentElement和parentNode的区别： 第一点parentElement是ie专用的,就是说在firefox(ff)浏览器里是不能使用的，一般情况parentNode可以取代parentElement的所有功能。 第二点就如名字所说，parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况
children和childNodes的区别
qq_45830543的博客
09-12 1399
在我写东西的过程中用到了childNodes,当我用这个childNodes来获取我想要的ul下的li集合时，总是会报错；于是我试着把它打印出来看看它里面装的是什么，原本是应该得到的是ul下的四个li，但是当我打印的时候，发现它得到了一个长度为9的数组; 于是我发现用childrenNodes来获取时它会把父节点下的空格也当做一个文本键获取到。 如图： 于是我尝试使用children来获取到我想要的li集合；它成功获取到ul下的li集合。 我们此时可以发现children它返回的只是HTML元素节
js中parentNode和parentElement的区别
香格里拉&的博客
01-14 2318
parentNode 父节点 parentElement 父元素节点 <body> <div id="box"></div> </body> <script> var box = document.getElementById('box'); //探究parentNode 和 parentElement 的区别 ...
Javacript中parentElement和parentNode的简单用法[0303]
MY128的博客
12-22 1240
Javacript中parentElement和parentNode的简单用法[0303]   一、开解：        本文主要讲的是parentElement和parentNode用法，先说说他们的区别吧，如果不在意的话，他们没区别，作用是一样的，非要去区别的话，那就是parentNode这样可以多浏览器兼容，parentElement可能只有IE能用。它们的作用就是返回当前节点的父节点...
dom node and html element,DOM parentNode和parentElement之间的区别
weixin_28800247的博客
07-10 320
6 个答案:答案 0 :(得分：380)parentElement是Firefox 9和DOM4的新功能，但它已经存在于所有其他主流浏览器中。在大多数情况下，它与parentNode相同。当节点parentNode不是元素时，唯一的区别就在于此。如果是，则parentElement为null。举个例子：document.body.parentNode; // the elementdocumen...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1024小神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值