【转】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 ...
最新文章
- Vue学习小札——2.6 组件参数校验与非props特性
- 日本搞笑研究：猫睡哪我睡哪，居然对睡眠质量没影响，还有这4点好处？
- Python 骚操作，微信远程控制电脑
- 当猪飞起来：也谈创业初期商业模式问题
- 统计所有带有null的特征
- xps文档节点序列化，节点排序
- JavaScript使用技巧精萃 经典代码收藏版
- Access-数据类型与.net OleDbType枚举类型对应关系
- 从mysql向HBase+Phoenix迁移数据的心得总结
- 照片边框 app android,Screener App-一手搞定将手机截图加上外框
- GitHub 标星8.6K：将任何设备转换为电脑的辅助屏幕
- 【开源毕设】一款精美的家校互动APP分享——爱吖校推 [你关注的，我们才推]（持续开源更新2）...
- 关于何种情况下使用DataGrid、DataList或Repeater的一些讨论(1) ambushaa [翻译] [转]
- java 性能框架_Java Fork Join 框架（四）性能
- 2020 小米刷机相关总结
- 基于java springboot记账本微信小程序源码(毕设)
- 几个在线的web代理
- Spatial-Spectral Transformer for Hyperspectral Image Classification
- arc64,x86等架构linux,windows系统openjdk下载
- VUE搭建云音乐播放器（App版本）