parentNode,parentElement,childNodes,children最经典讲解
首先了解parentNode,parentElement,childNodes,children四大属性之前,必须对Dom树有一定的了解,在Dom文档结构中,HTML页面每一部分都是由节点组成的,节点的类型一共有3种,元素节点,文本节点,属性节点,从图中可以看出属性节点属于元素节点的分支,一般不常考虑,
下来详细介绍,childNodes,childern,
childNodes指的是返回当前元素子节点的所有类型节点,其中连空格和换行符都会默认文本节点,
代码如下
打印结果:
其中空格和文本均打印为文本节点,这里有一个重点要说明一下!!!
之前说childNodes返回的是所有节点的数组,但是如果我给你li元素添加属性会发现元素的长度总长度并没有改变,也就是说在childNodes只会返回文本和元素的节点,并不能返回属性节点!!!
childern指的是返回当前元素的所有元素节点,代码如下
执行代码如下:
children很直观的反应了返回元素节点的属性。
接下来讲解:parentNode,parentElement,
parentNode:顾名思义-父节点
parentElement:顾名思义-父元素
两者在通常情况下都是一样的,因为包含元素的节点只有可能是元素节点,这里可能会有一个误区,有些人可能会想文本节点是否可以包含元素节点,来作为父节点,这里是不行的,文本节点只是文本本身,自身算一个节点,文本节点的父节点直接是元素节点。
那下面我们就说一下,parentNode,parentElement,的特例,
这里运行结果是一致的,他们的祖宗元素都是HTML,但是我们试着想一下,再往上一层,就是根部document了,并不是元素,我们可以一起来看一下下面的代码
执行代码如下:
这里的唯一区别就出来了,因为parentElement找的是元素,因此当找到根部document时候就是出现值为null的报错,而且parentNode找的是节点,当然就可以显示出来了!
以上是博主对Dom这四个原生的属性通过阅读网上的博客和文章总结出来的,希望可以帮助到正在学习javascript道路上的伙伴!!!
parentNode,parentElement,childNodes,children最经典讲解相关推荐
- 【转】parentNode,parentElement,childNodes,children最经典讲解
点进去原文 首先了解parentNode,parentElement,childNodes,children四大属性之前,必须对Dom树有一定的了解,在Dom文档结构中,HTML页面每一部分都是由节点 ...
- js中parentNode,parentElement,childNodes,children
首先了解parentNode,parentElement,childNodes,children四大属性之前,必须对Dom树有一定的了解,在Dom文档结构中,HTML页面每一部分都是由节点组成的,节点 ...
- 深入了解parentNode,parentElement,childNodes,children的区别,一看就懂
今天是准备面试的第七天,js是由ECMAScript.文档对象模型(DOM)和浏览器对象模型(BOM)组成,我们今天就了解下与DOM有关的常用接口parentNode,parentElement,ch ...
- parentNode,parentElement,childNodes,children之间的区别
parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的父对象. childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象 ...
- 【JS】中parentNode,parentElement,childNodes,children之间的区别
parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的父对象. childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合. ...
- parentNode,parentElement,childNodes,children区别
childNodes childNodes指的是返回当前元素子节点的所有类型节点,其中连空格和换行符都会默认文本节点 childNodes只会返回文本和元素的节点,并不能返回属性节点!!! child ...
- day31-33关于parentNode,parentElement,childNodes,children
找节点和找元素是不同的. childNodes和children区别在于,childNodes可能会找到文本节点,而children只会找到元素节点. parentNode和parentElement ...
- parentNode,parentElement,childNodes,children的区别
转自链接,https://blog.csdn.net/CODING_1/article/details/78202693 转载于:https://www.cnblogs.com/RioPlus/p/1 ...
- offsetParent与parentElement ,parentNode,parentElement,childNodes和children
offsetParent直接的将是影响元素位置的上级element,而parentElement与位置显示无关时dom中的上级element. 例如: <BODY> <div ...
最新文章
- oracle重新恢复数据库,重新安装oracle根据原数据文件恢复数据库
- 深入理解客户的需求至关重要!
- IOS ----UIButton用法详解
- SSRS:之为用户“NT AUTHORITY\NETWORK SERVICE”授予的权限不足,无法执行此操作。 (rsAccessDenied)...
- 动态规划 - Floyd算法求最短路径 - (Matlab建模)
- Telnet三步完成连接(简短版)
- atexit函数详解
- [3月25日]《编辑部的外传》
- SSM项目实战之十一:用户信息的添加
- 图形化开发(九)01-Three.js之案例——王者荣耀demo制作
- Kuangbin专题八生成树
- java 数组总结(赋值,反转,添加,查找)
- 滴滴Uber又打起来了!外卖领域C位花落谁家?
- MPP(大规模并行处理)
- Arm芯片上电启动流程剖解
- moodle php平台,“MOODLE平台安装与使用”
- Mac 安装非App Store软件
- 设计模式之略见一斑(装饰模式decorator)
- 腾讯云im介绍和如何接入使用
- C - Book Note
热门文章
- java遍历jsonobject_Java遍历JsonObject对象代码示例
- mysql的最小存储单元_数据库最小的存储单位是
- 锡南科技IPO过会:半年营收3.84亿 净利同比降18%
- Java、JS解析JSON对象、JSON数组
- CAN工具-VSpy(ValueCAN) - Panel面板(续)
- 2021年度总结 -- 致自己也致你们
- HTTP 的前世今生:一次性搞懂 HTTP、HTTPS、SPDY、HTTP2.0
- 曙光天阔H系列服务器,曙光天阔 A620r- H服务器系统支持 AMD最新推出的
- 怎么把cad图纸转换成pdf?
- MapInfo的功能介绍