Js中childNode与children的区别

childNodes:
标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确，具体见下面的例子。

除了IE9和Firefox，其他浏览器都支持通过childNodes[i]获取第i个子节点。

children:
非标准的，它返回指定元素的子元素集合。经测试，它只返回html节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。因此如果想获取指定元素的第一个html节点，可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。
返回指定元素的子元素集合，只包括元素节点，不包括文本节点。

除了IE9和Firefox，其他浏览器都支持通过children[i]获取第i个子节点。
代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="test">第一个子节点（且为文本节点）<div>第二个子节点（同时是第一个HTML元素节点）</div>第三个子节点（也是子节点）<div>第四个子节点（同时也是第二个HTML元素节点）</div><div>第五个子节点（同时也是第三个HTML元素节点），但我面前有个回车（即空节点）<div>我是第五个子元素的一个子节点</div></div><p id="ptag">this is a p tag.</p></div><script type="text/javascript">var test = document.getElementById('test');for (var i = 0; i < test.childNodes.length; i++) {console.log(test.childNodes[i]);if (i == test.childNodes.length - 1) {console.log('test.childNodes.length: ', test.childNodes.length);}}for (var j = 0; j < test.children.length; j++) {console.log(test.children[j]);if (j == test.children.length - 1) {console.log('test.children.length: ', test.children.length)}}</script>
</body></html>

结果截图:
输出界面：

控制台：（请仔细观察两种输出方式的数量）

Js中childNode与children的区别相关推荐

js中parentNode和parentElement的区别和用法
了解本篇的基础必须知道什么是节点,关于html dom节点知识点和节点类型的知识,分别看<js节点都有哪些类型?怎么判断是哪种节点类型?>和<js属性节点获取和移除>,下面直接 ...
Js中的style,currentStyle,getComputedStyle()区别
Js中的style,currentStyle,getComputedStyle()区别样式表有三种方式: 1.内嵌样式(inline Style)-是写在Tag里面的,内嵌样式只对所有的Tag有效 ...
JS中 let 和var的区别
JS中let和var 的区别简单介绍let var的常见变量提升 ES6可以用let定义块级作用域变量 let配合for循环的独特应用 let没有变量提升与暂时性死区 let变量不能重复声明简单介 ...
uniapp 获取到js文件var一个变量怎么获取到这个变量值_浅析Js中const,let,var的区别及作用域...
理解:let变量的作用域只能在当前函数中 js中const,let,var的区别及作用域_lianzhang861的博客-CSDN博客blog.csdn.net 全局作用域中,用 const 和 l ...
js中的extend的用法及其JS中substring与substr的区别
1. JS中substring与substr的区别之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...
js中几个对象的区别和用法
js中几个对象的区别和用法今天总结一下js中几个对象的区别和用法: 首先来说说 parent.window与top.window的用法 "window.location.href" ...
js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...
js中click()与onclick()的区别
由一个简单示例到 js中click()与onclick()的区别之前朋友在学习js的时候遇到一个有意思的问题. 先贴一份代码说一下代码构成这里是html结构 <ul><li> ...
js中函数和方法的区别:转载于黑泽君
js中函数和方法的区别在javascript中的解释为: 函数(function)是可以执行的javascript代码块,由javascript程序定义或javascript实现预定义.函数可以带 ...

Js中childNode与children的区别

Js中childNode与children的区别相关推荐

最新文章

热门文章