定义和用法
childNodes 属性返回节点的子节点集合，以 NodeList 对象。
提示：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。
浏览器支持
所有主流浏览器都支持 childNodes 属性。
语法
以上是定义来着w3cschool.com
DOM中节点的类型
DOM中一共有12中类型。但是我们常用的只有几种。
首先我们了解下DOM中一般常见的节点类型有哪些？
如果把Web上的文档比作一座大厦，则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。
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> 最终控制台的输出结果：
这个其实是nodeValue:\n123\n，加引号只是为了能看出换行效果。
这说明空格和换行符确实被当成一个文本接单
2、元素包含文字时，元素节点本身的nodevalue是null，而它包含的文字成为了一个独立的文本节点，这个文本节点的nodeValue才是我们之前设置的值。上例中的H1和SPAN都是这样的，childNodes的长度为1。而div因为没有内容所以div的childNodes的长度为0。
3、没有发现有nodeType为2的节点类型
所以建议在使用childNodes时，最好通过nodeType将返回集合过滤一遍再进行使用，能够避免很多不必要的问题。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/211417.html原文链接：https://javaforall.net
