parentNode 与 parentElement

kfepiza

于 2023-04-27 15:35:03 发布

阅读量566

点赞数

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

版权

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

84 篇文章 2 订阅

订阅专栏

Js JavaScript ECMAScript

48 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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