原文:JS中childNodes深入学习 

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <title></title>
  4. </head>
  5. <body>
  6.     <div id="box">
  7.         <div></div>
  8.         <div></div>
  9.         <div></div>
  10.     </div>
  11.  
  12.     <script type="text/javascript">
  13.         var getObjByID = function (id) {
  14.             return document.getElementById(id);
  15.         }
  16.  
  17.         var box = getObjByID("box");
  18.  
  19.         var child = box.childNodes;
  20.  
  21.         //初学者可能会以为这里输出的是3，其实不然，结果可能是 3 或者 7
  22.         document.write("box下的子节点个数：" + child.length + "<br/>");
  23.  
  24.         /*   为什么可能会是7呢，说明如下：
  25.  
  26.              首先，一个元素的 childNodes 包含了3种类型的节点（元素节点; 属性节点; 文本节点）
  27.  
  28.              之前之所以会认为输出是3，是因为我们只关注了元素节点（即：里面的3个div），
  29.  
  30.              忽略了属性节点和文本节点的存在。
  31.  
  32.              我们可以通过 nodeType 属性来提取各个节点，nodeType值与节点关系如下：
  33.  
  34.              nodeType === 1 元素节点
  35.              nodeType === 2 属性节点
  36.              nodeType === 3 文本节点
  37.  
  38.              实现代码如下：
  39.  
  40.         */
  41.  
  42.         var arrElements = [], arrAttributes = [], arrTexts = [];
  43.  
  44.         for (var i = 0; i < child.length; i++) {
  45.             //元素节点
  46.             if (child[i].nodeType === 1) {
  47.                 arrElements.push(child[i]);
  48.             }
  49.             //属性节点
  50.             if (child[i].nodeType === 2) {
  51.                 arrAttributes.push(child[i]);
  52.             }
  53.             //文本节点
  54.             if (child[i].nodeType === 3) {
  55.                 arrTexts.push(child[i]);
  56.             }
  57.  
  58.             //去除 空白符 文本节点
  59. //            if (child[i].nodeType === 3 && /\S/.test(child[i].nodeValue)) {
  60. //                arrTexts.push(child[i]);
  61. //            }
  62.         }
  63.  
  64.         /*我们将各个节点分别提取存储在数组中，现在输出查看结果：*/
  65.  
  66.         document.write("元素节点个数：" + arrElements.length + "<br/>");    //3
  67.         document.write("属性节点个数：" + arrAttributes.length + "<br/>");  //0
  68.         document.write("文本节点个数：" + arrTexts.length + "<br/>");       //4或0
  69.  
  70.         /*  这里存在一个浏览器兼容问题
  71.             在 firefox,chrome,ie9+ 等浏览器中 文本节点 的个数是 4
  72.             而在 ie8- 浏览器中 文本节点 的个数是 0
  73.  
  74.             原因：
  75.             在 firefox,chrome,ie9+ 会把 换行(空白符) 也算作一个文本节点
  76.             而在 ie8- 换行(空白符)是不算作文本节点的
  77.  
  78.             解决方案：
  79.             获取文本节点时，多加一个判断条件，即：如果不是 空白符 则添加，反之则不添加
  80.  
  81.             代码如下：
  82.  
  83.             //文本节点
  84.             if (child[i].nodeType === 3 && /\S/.test(child[i].nodeValue)) {
  85.                 arrTexts.push(child[i]);
  86.             }
  87.  
  88.             在上面for循环代码中加上 /\S/.test(child[i].nodeValue) 这个条件后再运行，你就会
  89.             发现所有浏览器 文本节点 个数都是0了
  90.  
  91.             如果对这个条件不懂的，可以去看下正则和test的用法。
  92.             http://www.jb51.net/tools/zhengze.html
  93.  
  94.         */
  95.  
  96.         /*  节点 除了有 nodeType 属性外，还有两个常用属性 nodeName 和 nodeValue
  97.  
  98.             元素节点的 nodeName 是标签名称
  99.             属性节点的 nodeName 是属性名称
  100.             文本节点的 nodeName 永远是 #text
  101.  
  102.             因此判断一个节点是否为文本节点，除了 child[i].nodeType === 3
  103.             还可以用 child[i].nodeName == "#text"
  104.  
  105.             元素节点的 nodeValue 是null
  106.             属性节点的 nodeValue 是属性的值
  107.             文本节点的 nodeValue 是文本节点的内容
  108.  
  109.             nodeValue 虽然是一个读/写 属性，但不能对 元素节点 设置 nodeValue 值
  110.  
  111.             将上面的html代码修改如下：
  112.  
  113.             <div id="box">
  114.                 111
  115.                 <div></div>
  116.                 <div></div>
  117.                 <div></div>
  118.             </div>
  119.  
  120.             加了 111 ，此时运行，文本节点 个数为1，且其nodeValue为 111
  121.             我们可将其打印查看。
  122.             document.write("第1个文本节点的值为："+ arrTexts[0].nodeValue);
  123.  
  124.             如果你没加 111， 那么运行此行代码会报错。因为没加 111 的话，文本节点个数为0个
  125.             arrTexts[0] 不存在。
  126.         */
  127.  
  128.         /*  通常我们都是获取元素节点，因此有个更好的办法
  129.  
  130.             代码如下：
  131.         */
  132.  
  133.         var child_div = box.getElementsByTagName("div");
  134.  
  135.         document.write("box下div元素节点个数：" + child_div.length);
  136.  
  137.     </script>
  138. </body>
  139. </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. tomcatserver解析（六）-- Acceptor

    Acceptor负责用来管理连接到tomcatserver的数量,来看看Acceptor在tomcatserver中的应用,是怎样实现连接管理的,socket连接建立成功之后,是怎样实现内容的读写的( ...

  2. IOS经典的书籍推荐

    基础 objective-c基础教程 iphone 开发秘籍 进阶篇 iOS 6编程实战 Objective-C 高级编程:iOS与OS X多线程和内存管理 Effective Objective-C ...

  3. Advanced Installer 制作.NetWeb部署安装包

    原文:Advanced Installer 制作.NetWeb部署安装包 因为是.Net的Web应用程序,所以想用Advanced Installer 调用Dll实现安装部署. 因为我需要自己定制参数 ...

  4. DICOM：DICOM3.0网络通信协议（延续）

    题记: 在过去的一年中一直坚持周末博客,整理工作与休闲比的点点滴滴. 新知识点.新技术的涉猎会单独成文,对于与DICOM相关的知识统一放在了DICOM医学图像处理 专栏里,事实上DICOM英文全称是D ...

  5. 什么是简单的分析SQL注入漏洞

    如今非常多人在入侵的过程中基本都是通过SQL注入来完毕的,可是有多少人知道为什么会有这种注入漏洞呢?有的会随口说着对于字符的过滤不严造成的. 可是事实是这样吗?我们学这些.不仅要知其然.更要知其所以然 ...

  6. MVC客户管理（添加、修改、查询、分页）

    ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页)   目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2 ...

  7. 【网络流量-二部图最大匹配】poj3041Asteroids

    /* 这个问题将是每行一个x作为节点x,没有列y作为节点y,障碍物的坐标xy来自x至y的 边缘.图建的问题后,变成,拿得最少的点,因此,所有这些点与相邻边缘,即最小 点覆盖,与匈牙利算法来解决. -- ...

  8. hdu Text Reverse

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1062 单词翻转! 代码: #include <stdio.h> #include < ...

  9. Android启动第三方应用程序

    主要是开始通过包名的第三方应用程序,获取的方法的包名是非常在线.不是说. 两种方式启动: 第一: Intent intent = new Intent(); intent.setClassName(& ...

  10. NPOI实现Excel导入导出

    NPOI实现Excel的导入导出,踩坑若干. Cyan是博主[Soar360]自2014年以来开始编写整理的工具组件,用于解决现实工作中常用且与业务逻辑无关的问题. 什么是NPOI? NPOI 是 P ...