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

documentdocument.documentElementdocument.documentElement.parentNodedocument.documentElement.parentNode===documentdocument.documentElement.parentElementdocument.documentElement.parentElement===documentdocument.documentElement===document.head.parentNodedocument.documentElement===document.head.parentElementdocument.documentElement===document.body.parentNodedocument.documentElement===document.body.parentElementdocument.head.parentNode===document.head.parentElementdocument.body.parentNode===document.body.parentElement

浏览器兼容性

parentNode
parentElement

parentNode 与 parentElement相关推荐

  1. parentNode，parentElement,offsetParent

    offsetParent直接的将是影响元素位置的上级element,而parentElement与位置显示无关时dom中的上级element. 例如:<BODY><div style ...

  2. js中parentNode和parentElement的区别和用法

    了解本篇的基础必须知道什么是节点,关于html dom节点知识点和节点类型的知识,分别看<js节点都有哪些类型?怎么判断是哪种节点类型?>和<js属性节点获取和移除>,下面直接 ...

  3. parentNode、parentElement，childNodes、children 区别

    parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的父对象. childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合. ...

  4. JS中parentNode和parentElement的区别

    参考文章 以一个网页作为例子: <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...

  5. dom node and html element,DOM parentNode和parentElement之间的区别

    6 个答案: 答案 0 :(得分:380) parentElement是Firefox 9和DOM4的新功能,但它已经存在于所有其他主流浏览器中. 在大多数情况下,它与parentNode相同.当节点 ...

  6. parentNode和parentElement的区别

    首先了解parentNode,parentElement属性之前,必须对DOM树有一定的了解.在DOM文档结构中,HTML页面每一部分都是由节点组成的,节点的类型一共有3种,元素节点,文本节点,属性节 ...

  7. offsetParent与parentElement ,parentNode,parentElement,childNodes和children

    offsetParent直接的将是影响元素位置的上级element,而parentElement与位置显示无关时dom中的上级element. 例如:   <BODY>   <div ...

  8. 深入了解parentNode,parentElement,childNodes,children的区别，一看就懂

    今天是准备面试的第七天,js是由ECMAScript.文档对象模型(DOM)和浏览器对象模型(BOM)组成,我们今天就了解下与DOM有关的常用接口parentNode,parentElement,ch ...

  9. parentNode,parentElement,childNodes,children之间的区别

    parentElement 获取对象层次中的父对象.   parentNode 获取文档层次中的父对象.   childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象 ...

最新文章

  1. 在线项目管理软件推荐
  2. 将标签one-hot化的方法
  3. Oracle-SQL语法基础【以一个完整项目为例】
  4. bootstrap项目实例_SpringCloud Config 使用Git的应用实例
  5. stm32搭建mqtt_STM32+ESP8266+AIR202基本控制篇-102-服务器基本搭建-安装MQTT软件(.Windows系统)...
  6. java servlet 转发和重定向_JavaWeb（一）Servlet中乱码解决与转发和重定向的区别
  7. STM32H7---高速缓存Cache(二)
  8. C# 面向对象之多态
  9. 1031. 查验身份证(15)-PAT乙级真题
  10. MemCache详细解读（转）
  11. Js+fromdata
  12. oracle用户有关操作,oracle用户会话操作
  13. vtd xml java_新兴XML处理方法VTD-XML介绍
  14. Spring AOP中Introduction的使用
  15. Axure rp9 中继器新建表格
  16. Java课程设计——文本文件加密与解密软件设计与实现
  17. DuerOS的零编程技能实现
  18. JavaScript知识汇总
  19. 什么是空头陷阱?(全网最全面的分析）？
  20. Kibana：如何在 Discover 中显示图片及播放音乐

热门文章

  1. clientWidth、offsetWidth等介绍
  2. 用Python给头像或者照片加点水印！
  3. Lattice系列FPGA入门之FPGA选型
  4. 值得购买的新能源小车：奇瑞新能源小蚂蚁
  5. 【STL MAP】冷血格斗场
  6. 西安交大软件保研总结（中游偏下水平）
  7. PTA不能用循环是一件多么悲伤的事
  8. 实习日记——Day1
  9. python爬取中国最好大学排名（实例）
  10. （附源码）计算机毕业设计SSM基于的二手车交易平台