定义和用法

childNodes 属性返回节点的子节点集合，以 NodeList 对象。

提示：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。

浏览器支持

所有主流浏览器都支持 childNodes 属性。

语法

element.childNodes

技术细节

返回值：	NodeList 对象，表示节点集合。
DOM 版本	Core Level 1

以上是定义来着w3cschool.com

DOM中节点的类型

DOM中一共有12中类型。但是我们常用的只有几种。

首先我们了解下DOM中一般常见的节点类型有哪些？

1、元素节点

DOM中的原子都是元素节点，比如<body><table><div>等等。

如果把Web上的文档比作一座大厦，则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。

2、文本节点

任意的文字、空格、换行、空白行都算是文本节点。

3、属性节点

属性节点，故名思议就是其他节点的属性。例如所有的元素都有title属性，在title='title1'就是一个属性节点。

4、注释节点

就是注释了。

childNodes包含了哪些节点？

由childNodes属性返回的数组中包含着所有类型的节点，所有的属性节点和文本节点也包含在其中。（这一点存在疑问,下面有解释）

事实上，文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中。

chidNoeds返回的事node的集合，

每个node都包含有nodeType属性。

nodeType取值：

元素节点：1

属性节点：2

文本节点：3

注释节点：8

测试

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script>window.onload = function () {console.log("body的childNodes");var oItems = document.body.childNodes;for (var i = 0; i < oItems.length; i++) {console.log("nodeType:" + oItems[i].nodeType);console.log("nodeName:" + oItems[i].nodeName);console.log("nodeValue:'" + oItems[i].nodeValue + "'");}console.log("h1的childNodes");getChildNodesAtrr(document.getElementsByTagName("h1")[0]);console.log("span的childNodes");getChildNodesAtrr(document.getElementsByTagName("span")[0]);console.log("div的childNodes");getChildNodesAtrr(document.getElementsByTagName("div")[0]);};function getChildNodesAtrr(dom) {var oItems = dom.childNodes;for (var i = 0; i < oItems.length; i++) {console.log("nodeType:" + oItems[i].nodeType);console.log("nodeName:" + oItems[i].nodeName);console.log("nodeValue:'" + oItems[i].nodeValue + "'");}}</script>
</head>
<body><h1>h1</h1><span>span</span><!--这是一个注释-->123<div class="class1" title="title1"></div>
</body>
</html>

最终控制台的输出结果：

body的childNodes
nodeType:3
nodeName:#text
nodeValue:'
'
nodeType:1
nodeName:H1
nodeValue:'null'
nodeType:3
nodeName:#text
nodeValue:'
'
nodeType:1
nodeName:SPAN
nodeValue:'null'
nodeType:3
nodeName:#text
nodeValue:'
'
nodeType:8
nodeName:#comment
nodeValue:'这是一个注释'
nodeType:3
nodeName:#text
nodeValue:'
123
'
nodeType:1
nodeName:DIV
nodeValue:'null'
nodeType:3
nodeName:#text
nodeValue:'

'
h1的childNodes
nodeType:3
nodeName:#text
nodeValue:'h1'
span的childNodes
nodeType:3
nodeName:#text
nodeValue:'span'
div的childNodes

结果分析

1、分析结果，其中可以发现

nodeValue:'
123
'

这个其实是nodeValue:\n123\n，加引号只是为了能看出换行效果。

这说明空格和换行符确实被当成一个文本接单

2、元素包含文字时，元素节点本身的nodevalue是null，而它包含的文字成为了一个独立的文本节点，这个文本节点的nodeValue才是我们之前设置的值。上例中的H1和SPAN都是这样的，childNodes的长度为1。而div因为没有内容所以div的childNodes的长度为0。

3、没有发现有nodeType为2的节点类型

总结

在使用原生的childNodes时，包括提供的nodeValue，firstChild()，lastChild()等等。都需要注意其他元素类型的影响，因为我们通常操作的都是元素节点。而childNodes返回的集合中包含了很多意向不到的东西，在实际使用中和容易造成错误。

所以建议在使用childNodes时，最好通过nodeType将返回集合过滤一遍再进行使用，能够避免很多不必要的问题。

疑问

实际测试发现并没有发现有nodeType为2的node。不知道是和原因？希望有知道的大神告知。

以上哪有写的不对的地方欢迎指正学习。^3^

欢迎转载

转载注明原创地址：http://www.cnblogs.com/Jersen/p/4908943.html

转载于:https://www.cnblogs.com/Jersen/p/4908943.html

childNodes详解相关推荐

js中childNodes为什么输出#text：childNodes详解
转载原创地址:http://www.cnblogs.com/Jersen/p/4908943.html 定义和用法 childNodes 属性返回节点的子节点集合,以 NodeList 对象. 提示: ...
childnodes与children详解
childnodes与children详解例:<div id="parentDiv"> <span>我爱</span> </br> ...
js中childNodes易错点、详解定义以及用法
js中childNodes易错点.详解定义以及用法最近学习的时候,我遇到了childNodes的一些问题,我查阅了一些资料,总结一下其定义及用法.在学习childNodes之前,我们需要先了解一下D ...
DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...
php 赋值给 dom对象,详解PHP原生DOM对象操作XML的方法
详解PHP原生DOM对象操作XML的方法发布于 2017-08-08 20:15:29 | 80 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...
Day04 dom详解及js事件
day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理表单验证上次课内容回顾: JS中ECMAScript用法: JS定义变量: ...
JavaScript中DOM对象的详解
*** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...
ext核心API详解
http://hi.baidu.com/j2me/profile 1 EXT核心API详解(一)-Ext 1 EXT核心API详解(二)-Array/Date/Function/Number/Stri ...
JS详解 | 对象事件节点 | 系统性学习 | 无知的我费曼笔记
无知的我正在复盘js- 文章目录 JavaScript 1 常用命令输出语句转换为字符串得到变量类型 1 获取元素对象 1.1 H5新增获取元素对象 1.2 直接获取特殊元素对象 2 事件三要素 ...

childNodes详解