parentNode 与 parentElement

最新推荐文章于 2023-05-05 15:00:24 发布

kfepiza

最新推荐文章于 2023-05-05 15:00:24 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/kfepiza/article/details/130404468

版权

HTML CSS JS 同时被 2 个专栏收录

85 篇文章

订阅专栏

Js JavaScript ECMAScript

49 篇文章

订阅专栏

这篇文章探讨了在JavaScript中处理DOM时，parentNode与parentElement属性的区别。主要差异在于当元素是HTML元素时，parentNode返回的是document对象，而parentElement对于HTML元素返回null。此外，展示了获取HTML元素的不同方法以及在Chrome浏览器中的测试结果，强调了这两个属性在文档结构和元素层级关系中的作用。

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

在这里插入图片描述

parentElement 与 parentNode 的主要区别

parentNode 与 parentElement 的主要区别在元素是 html 时才表现出来

html元素的 parentNode 是 document
html元素的 parentElement 是 null

获得html元素的方法有:

document.documentElement
document.body.parentNode
document.body.parentElement
document.head.parentNode
document.head.parentElement

在chrome空白页测试

在这里插入图片描述

document.parentNode
null
document.parentElement
null
document.head.parentNode

document.head.parentElement document.body.parentNode document.body.parentElement document.documentElement.parentNode #document document.documentElement.parentElement null document.documentElement document.body.parentNode===document.documentElement true document.body.parentElement===document.documentElement true document.head.parentNode===document.documentElement true document.head.parentElement===document.documentElement true document #document document.documentElement.parentNode===document true document.documentElement.parentElement null

document.parentNode
null
document.parentElement
null
document.head.parentNode
<html><head></head><body></body></html>
document.head.parentElement
<html><head></head><body></body></html>
document.body.parentNode
<html><head></head><body></body></html>
document.body.parentElement
<html><head></head><body></body></html>
document.documentElement.parentNode
#document
document.documentElement.parentElement
null
document.documentElement
<html><head></head><body></body></html>
document.body.parentNode===document.documentElement
true
document.body.parentElement===document.documentElement
true
document.head.parentNode===document.documentElement
true
document.head.parentElement===document.documentElement
true
document
#document<html><head></head><body></body></html>
document.documentElement.parentNode===document
true
document.documentElement.parentElement
null

复制粘贴测试代码

document

document.documentElement

document.documentElement.parentNode

document.documentElement.parentNode===document

document.documentElement.parentElement

document.documentElement.parentElement===document

document.documentElement===document.head.parentNode

document.documentElement===document.head.parentElement

document.documentElement===document.body.parentNode

document.documentElement===document.body.parentElement

document.head.parentNode===document.head.parentElement

document.body.parentNode===document.body.parentElement

document

document.documentElement

document.documentElement.parentNode

document.documentElement.parentNode===document

document.documentElement.parentElement

document.documentElement.parentElement===document

document.documentElement===document.head.parentNode

document.documentElement===document.head.parentElement

document.documentElement===document.body.parentNode

document.documentElement===document.body.parentElement

document.head.parentNode===document.head.parentElement

document.body.parentNode===document.body.parentElement