原文: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>

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

JS中childNodes深入学习的更多相关文章

  1. js中关于prototype学习（2015年1月5号晚）

    prototype在js中为原型,只要是对象都有原型,最高原型为Object. 函数作为一特殊的对象,下面探讨prototype(原型)和function(函数)之间的关系. function A ( ...

  2. js中this指向学习总结

      在面向对象的语言中(例如Java,C#等),this 含义是明确且具体的,即指向当前对象.一般在编译期绑定. 然而js中this 是在运行期进行绑定的,这是js中this 关键字具备多重含义的本质 ...

  3. JS中Generator的学习小记

    Generator的异步实现 整理了一下在学习和使用JS异步过程中的一些知识点.核心是在Generator实例的的回调中调度实例的下一步,同样的思想也能用于其它语言.比如Python中使用Genera ...

  4. Js中Array数组学习总结

    第一次写博客...有点方... 小白一枚(是真的小白),自学前端,下面来说说我在学习过程中总结的一些数组操作,如果说哪有错误,请各位大神多多指出,小的虚心接受. 引用类型分为Object类型(所谓的对 ...

  5. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  6. JavaScript学习笔记——JS中的变量复制、参数传递和作用域链

    今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...

  7. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  8. Javascript高级编程学习笔记（3）—— JS中的数据类型（1）

    前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...

  9. js中的基本类型与引用类型学习

    一.基本数据类型 ECMAScript 有 5 种原始类型(primitive type),即 Undefined.Null.Boolean.Number 和 String,也称为基本数据类型,ES6 ...

随机推荐

  1. Codeforces 480C Riding in a Lift dp

    主题链接:点击打开链接 意甲冠军: 特定 n a b k 构造一个长度k该序列. 使得序列中 对于随意两个相邻的数 | w[i-1] - w[i] | < | w[i] - b | 且第一个数 ...

  2. [WebGL入门]四，渲染准备

    注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家 ...

  3. PC结束 Spark 二次开发 收到自己主动，并允许好友请求

    本次Spark二次开发是为了客服模块的开发, 能让用户一旦点击该客服则直接自己主动加入好友.而客服放则需自己主动加入好友,不同弹出对话框进行允许,这方便的广大客服. 如今废话不多说,直接上代码. pa ...

  4. wikioi 1034 家 实时动态的网络流量（费用流）

    因为随着时间的推移.网络侧变得,因此,常见的网络流量也解决不了这个问题,.如果T毕竟运输时间. 为此.我们可以基于时间分割点,所有的点将被分割为T点. 对于每一个点,下一次甚至一个容量为本人INF边缘 ...

  5. 随笔 - Internet缓存文件

    Internet缓存文件 本文地址: http://blog.csdn.net/caroline_wendy 互联网上全部的使用记录, 图片, 音乐, 视频, 都会缓存在本地. 1. 位置: IE-& ...

  6. or1200乘法除法指令解释

    以下摘录<步骤吓得核心--软-core处理器的室内设计与分析>一本书 OR1200中乘法除法类指令共同拥有9条,表8.3给出了全部的乘法除法类指令的作用及说明. 说明:表8.3是ORBIS ...

  7. linux Apache安装

    原文:linux Apache安装 1.       下载apache,http://httpd.apache.org/download.cgi  通过这个官方网站,我们可以下到最新的版本.现在版本都 ...

  8. 解决 configure.ac:17: error: possibly undefined macro: AC_PROG_LIBTOOL

    当安装configure.ac:17: error: possibly undefined macro: AC_PROG_LIBTOOL If this token and others are le ...

  9. linux终奌站 信息 格式 更改 /etc/bashrc

    gedit /etc/bashrc shell环境下默认的特殊符号意义: \d :代表日期,格式为weekday month date,比如:"Sun Sep 18" \H :完整 ...

  10. Hdu 3962 Microgene (AC自己主动机+矩阵)

    标题效果: 构造一个字符串,使得有两个和两个以上的目标串.长短L这一系列有多少串都. IDEAS: 只有全款减有1一些字符串,没有目标就是答案. 假定数据是非常小的,够用dp解.dp[i][j][k] ...