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

parentNode,parentElement

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

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

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

执行代码如下:

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

parentNode和parentElement的区别相关推荐

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

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

  2. JS中parentNode和parentElement的区别

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

  3. parentNode、parentElement,childNodes、children 区别

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

  4. parentNode,parentElement,offsetParent

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

  5. parentNode 与 parentElement

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

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

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

  7. [JavaScript][转]offsetParent和parentElement的区别

    作者:未知 来源于:网络转载 发布时间:2006-9-30 23:42:32 一直以为offsetParent和parentElement是一回事,最近在做web控件才发现原来的理解是大错特错.   ...

  8. offsetParent和parentElement的区别

    parentElement 在msdn的解释是Retrieves the parent object in the object hierarchy. 而offsetParent在msdn的解释是Re ...

  9. parentNode和offsetParent的区别

    parentNode:直接父级 offsetParent:类似于css的包含块(根据本身定位及父级定位来确认offsetParent的目标元素) offsetParent的作用:     offset ...

最新文章

  1. C#实现类似qq的屏幕截图程序
  2. 宗成庆:如何撰写毕业论文?
  3. Linux下触摸屏驱动程序分析
  4. web服务器的文档根目录,web服务器根目录中
  5. 网易发布云计算战略,“为解放程序员而来”
  6. vb对数据库操作用存储过程
  7. C语言 十进制和十六进制相互转换 - C语言零基础入门教程
  8. 开源GIS(十一)——openlayers中加载离线标准与自定义切片(深度好文)
  9. 开源公司黄页之阿里巴巴开源软件推荐(二)
  10. “无法找到Internet Explorer”的解决方法
  11. SparkSQL UDF使用方法与原理详解
  12. python做excel数据条件_懂点EXCEL就行!教你利用Python做数据筛选(上)
  13. superset集成echarts
  14. 多元函数的高阶微分公式 与 Taylor公式
  15. Linux下的java运行
  16. android如何app主题更换,通过EventBus更换android app主题
  17. 阿里云服务器实时计算Flink/Blink首选大数据型d2c、d2s实例
  18. Oracle 12c 的安装
  19. 怎么向html中加入flash,html怎么插入flash
  20. 亚马逊Amazon常用API接口-获得商品详情-接入说明

热门文章

  1. 商城项目16_es简介、详解倒排索引、安装es以及kibana、检索es基本信息、增删改查文档
  2. 官网git下载失败问题
  3. flink cep demo
  4. Win10的界面字体突然变大的解决办法
  5. 2018/12/14
  6. python:学员管理系统
  7. ARP病毒攻击的防范和处理及方法
  8. Unity3D加载火炬之光资源
  9. 再撘一套Kubernetes集群
  10. 《惢客创业日记》2018.12.09(周日)这位导师一定不能放过