一聚教程网:一个值得你收藏的教程网站

最新下载

javascript DOM 操作 childNodes 详解

时间:2015-10-25 00:00:00 编辑:简简单单 来源:转载

定义和用法

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

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


浏览器支持

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


语法

element.childNodes

技术细节


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

以上是定义来着w3cschool.com


DOM中节点的类型


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

首先我们了解下DOM中一般常见的节点类型有哪些?
1、元素节点

DOM中的原子都是元素节点,比如

等等。

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

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

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

就是注释了。

 
childNodes包含了哪些节点?

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

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

 
chidNoeds返回的事node的集合,

每个node都包含有nodeType属性。

nodeType取值:

元素节点:1

属性节点:2

文本节点:3

注释节点:8

 
测试





   
   
    <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>


   

h1


    span
   
    123
   




最终控制台的输出结果:

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将返回集合过滤一遍再进行使用,能够避免很多不必要的问题。

文章评论

热门栏目