了解childNodes 和 children 区别

做题的时候碰见了关于 childNodes 和 children之间的区别的问题,查了一点点资料,对他们二者之间也有了一些了解,写博客加深一下自己的印象.

二者的定义:

childNodes: 返回包含指定节点的子节点的集合，该集合为即时更新的集合
children : 是一个只读属性，返回一个Node的子elements ，是一个动态更新的 HTMLCollection,属于非标准型，不过它还是依旧可以被所有的浏览器所支持

用下面的一段代码来展示二者之间具体的区别:
childNodes的结果:

    <ul id ='list'><li>111</li><li>222</li><li>333</li></ul><script>let oul = document.getElementById('list');let olis = oul.childNodes;console.log(olis.length);console.log(olis);</script>

打印结果如下图:

在我们的认识中,这里难道不应该打印3吗?他为啥打印了7呢,因为Internet Explorer 会忽略节点之间生成的空白文本节点（比如换行字符），而 Mozilla 不这么做。

我们具体来看看到到时为啥会打印7呢?

childNodes 获取的是元素所有的子节点.

childrem 打印情况:

        let oul = document.getElementById('list');let olis = oul.children;console.log(olis.length);console.log(olis);

打印的结果如下:

children 用来获取所有的子元素,所以打印的结果是 3. children不需要去计算空格所占的节点

获取标签里面的内容值需要通过下标获取对应的元素,然后获取元素中的内容即可:

        console.log(oul.childNodes[3].innerHTML);console.log(oul.children[1].innerHTML);

得到的结果实现相同的,如下图:

    for(let i = 0 ; i < olis.length ; i++) {if (oul.childNodes[i].nodeType == 1) {// nodes.childNodes[i] 是元素节点console.log(`${i}是元素节点`);}else if(oul.childNodes[i].nodeType == 2) {console.log(`${i}是属性节点`);}else {console.log(`${i}是文本节点`);}}

不建议使用childNodes方法。
硬要使用这个方法，可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。因此我们做如下判断:

for(let i = 0 ; i < olis.length ; i++) {if (oul.childNodes[i].nodeType == 1) {// nodes.childNodes[i] 是元素节点console.log(`${i}是元素节点`);}else if(oul.childNodes[i].nodeType == 2) {console.log(`${i}是属性节点`);}else {console.log(`${i}是文本节点`);}}

和 childNodes 方法相比,更推荐使用 children方法.

了解childNodes 和 children 区别相关推荐

关于childNodes和children区别
关于childNodes和children区别一.parentNode和parentElement区别? 二.childNodes和children区别 1.区别 HTML共同 <ul id= ...
parentNode、parentElement，childNodes、children 区别
parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的父对象. childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合. ...
JavaScript之childNodes 和 children 区别
1.先让我们来看看childNodes的用法,以及是如何计算节点数量: 为什么输出是7而不是3呢?原来Internet Explorer 会忽略节点之间生成的空白文本节点(比如换行字符),而 Mozi ...
javascript中childNodes与children 区别以及firstChild与firstElementChild区别
1:childNodes属性: 标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属 ...
Js-parentNode、parentElement，childNodes、children 它们有什么区别呢？
原文:http://www.it130.cn/Article/FAQ/Web-kaifa/JavaScript/2007-3-20/2007032017013900.html 所属分类:Web 开发 ...
js表单验证处理和childNodes 和children 的区别
一.对提交表单进行空值验证 html代码: 1 <form action="#"onsubmit="return validate_form(this);" ...
childNodes和children的区别
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>c ...
childNodes和children，firstChild和firstElementChild，lastChild和lastElementChild的区别
首先,我们给出HTML的代码 <ul id='city'><li>北京</li><li>南京</li><li>东京</li ...
Html DOM元素的childNodes和children的区别
对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象. 具体看一下针对c ...

了解childNodes 和 children 区别

了解childNodes 和 children 区别相关推荐

最新文章

热门文章