JS中childNodes深入学习

原文:JS中childNodes深入学习

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <script type="text/javascript">
        var getObjByID = function (id) {
            return document.getElementById(id);
        }

        var box = getObjByID("box");

        var child = box.childNodes;

        //初学者可能会以为这里输出的是3，其实不然，结果可能是 3 或者 7
        document.write("box下的子节点个数：" + child.length + "<br/>");

        /*   为什么可能会是7呢，说明如下：

             首先，一个元素的 childNodes 包含了3种类型的节点（元素节点; 属性节点; 文本节点）

             之前之所以会认为输出是3，是因为我们只关注了元素节点（即：里面的3个div），

             忽略了属性节点和文本节点的存在。

             我们可以通过 nodeType 属性来提取各个节点，nodeType值与节点关系如下：

             nodeType === 1 元素节点
             nodeType === 2 属性节点
             nodeType === 3 文本节点

             实现代码如下：

        */

        var arrElements = [], arrAttributes = [], arrTexts = [];

        for (var i = 0; i < child.length; i++) {
            //元素节点
            if (child[i].nodeType === 1) {
                arrElements.push(child[i]);
            }
            //属性节点
            if (child[i].nodeType === 2) {
                arrAttributes.push(child[i]);
            }
            //文本节点
            if (child[i].nodeType === 3) {
                arrTexts.push(child[i]);
            }

            //去除 空白符 文本节点
//            if (child[i].nodeType === 3 && /\S/.test(child[i].nodeValue)) {
//                arrTexts.push(child[i]);
//            }
        }

        /*我们将各个节点分别提取存储在数组中，现在输出查看结果：*/

        document.write("元素节点个数：" + arrElements.length + "<br/>");    //3
        document.write("属性节点个数：" + arrAttributes.length + "<br/>");  //0
        document.write("文本节点个数：" + arrTexts.length + "<br/>");       //4或0

        /*  这里存在一个浏览器兼容问题
            在 firefox,chrome,ie9+ 等浏览器中 文本节点 的个数是 4
            而在 ie8- 浏览器中 文本节点 的个数是 0

            原因：
            在 firefox,chrome,ie9+ 会把 换行(空白符) 也算作一个文本节点
            而在 ie8- 换行(空白符)是不算作文本节点的

            解决方案：
            获取文本节点时，多加一个判断条件，即：如果不是 空白符 则添加，反之则不添加

            代码如下：

            //文本节点
            if (child[i].nodeType === 3 && /\S/.test(child[i].nodeValue)) {
                arrTexts.push(child[i]);
            }

            在上面for循环代码中加上 /\S/.test(child[i].nodeValue) 这个条件后再运行，你就会
            发现所有浏览器 文本节点 个数都是0了

            如果对这个条件不懂的，可以去看下正则和test的用法。
            http://www.jb51.net/tools/zhengze.html

        */

        /*  节点 除了有 nodeType 属性外，还有两个常用属性 nodeName 和 nodeValue

            元素节点的 nodeName 是标签名称
            属性节点的 nodeName 是属性名称
            文本节点的 nodeName 永远是 #text

            因此判断一个节点是否为文本节点，除了 child[i].nodeType === 3
            还可以用 child[i].nodeName == "#text"

            元素节点的 nodeValue 是null
            属性节点的 nodeValue 是属性的值
            文本节点的 nodeValue 是文本节点的内容

            nodeValue 虽然是一个读/写 属性，但不能对 元素节点 设置 nodeValue 值

            将上面的html代码修改如下：

            <div id="box">
                111
                <div></div>
                <div></div>
                <div></div>
            </div>

            加了 111 ，此时运行，文本节点 个数为1，且其nodeValue为 111
            我们可将其打印查看。
            document.write("第1个文本节点的值为："+ arrTexts[0].nodeValue);

            如果你没加 111， 那么运行此行代码会报错。因为没加 111 的话，文本节点个数为0个
            arrTexts[0] 不存在。
        */

        /*  通常我们都是获取元素节点，因此有个更好的办法

            代码如下：
        */

        var child_div = box.getElementsByTagName("div");

        document.write("box下div元素节点个数：" + child_div.length);

    </script>
</body>
</html>

所有讲解都写在注释里面了，有错误或不足的地方还望大神们指点，谢谢！