chidNodes返回的是node的集合，

每个node都包含有nodeType属性。

nodeType取值：

元素节点：1

属性节点：2

文本节点：3

注释节点：8
 
 
页面上是由无数个节点组成，节点分成元素节点、属性节点、文本节点、注释节点
<table>
     <tr>
          <td>aaa</td>
          <td>bbb</td>
     </tr>
</table>
table与tr、tr与td、td与td之间的换行都属于文本节点，如果获取table的chidNodes，将会获得9个节点，但事实上我们并不希望得到那些换行的空文本节点，td内的aaa仍然是td下的文本节点，要想获得td内的aaa，则需要通过td.chidNodes去获取，解决方法和示例如下：
 <html>

 <head>

     <title></title>

     <script src="../js/jquery-1.12.3.min.js"></script>

 </head>

 <body>

     <table>

         <tr>

             <td>值1</td>

             <td>值2</td>

             <td>值3</td>

         </tr>

         <tr class="for-tr">

             <td>aaa</td>

             <td>bbb</td>

             <td>ccc</td>

         </tr>

         <tr class="for-tr">

             <td>ddd</td>

             <td>eee</td>

             <td>fff</td>

         </tr>

         <tr class="for-tr">

             <td>ggg</td>

             <td>hhh</td>

             <td>kkk</td>

         </tr>

         <tr class="for-tr">

             <td>lll</td>

             <td>ppp</td>

             <td>ooo</td>

         </tr>

     </table>

 </body>

 <script type="text/javascript">

     var postArr = [];

     for (var i = 0; i < document.getElementsByClassName('for-tr').length; i++) {//循环所有的tr

         var subObj = {};

         console.log(document.getElementsByClassName('for-tr')[i].childNodes);

         // var subChild = delSpaceDom(document.getElementsByClassName('for-tr')[i]);

         // subObj.name = subChild[0].childNodes[0].nodeValue;

         // subObj.age = subChild[1].childNodes[0].nodeValue;

         // subObj.sex = subChild[2].childNodes[0].nodeValue;

         postArr.push(subObj);

     };

     console.log(postArr);

 </script>

 </html>

没有过滤掉空文本节点之前

打印出每个for-tr下的子元素节点，有七个节点，如图：

移除空文本节点之后的代码如下：

<html>

<head>

    <title></title>

</head>

<body>

    <table>

        <tr>

            <td>值1</td>

            <td>值2</td>

            <td>值3</td>

        </tr>

        <tr class="for-tr">

            <td>aaa</td>

            <td>bbb</td>

            <td>ccc</td>

        </tr>

        <tr class="for-tr">

            <td>ddd</td>

            <td>eee</td>

            <td>fff</td>

        </tr>

        <tr class="for-tr">

            <td>ggg</td>

            <td>hhh</td>

            <td>kkk</td>

        </tr>

        <tr class="for-tr">

            <td>lll</td>

            <td>ppp</td>

            <td>ooo</td>

        </tr>

    </table>

</body>

<script type="text/javascript">

    var postArr = [];

    for (var i = 0; i < document.getElementsByClassName('for-tr').length; i++) {//循环所有的tr

        var subObj = {};

        var subChild = delSpaceDom(document.getElementsByClassName('for-tr')[i]);

        subObj.name = subChild[0].childNodes[0].nodeValue;

        subObj.age = subChild[1].childNodes[0].nodeValue;

        subObj.sex = subChild[2].childNodes[0].nodeValue;

        postArr.push(subObj);

    };

    console.log(postArr);

    function delSpaceDom(parentNode) {

        var sub_child = parentNode.childNodes;

        for (var i = 0; i < sub_child.length; i++) {

            if(sub_child[i].nodeType == '3' && sub_child[i].nodeName == '#text' && !/\S/.test(sub_child[i].nodeValue)){//文本节点并且是空的文本节点时，将空文本节点删除

                parentNode.removeChild(sub_child[i]);

            }

        }

        return parentNode.childNodes;

    }

</script>

</html>
运行结果如下：
总结：
页面上是由无数个节点组成，而childNodes是获取到所有的节点，要想得到自己想要的节点，需要经过处理。

javascript获取childNodes详情，删除空节点的更多相关文章

  1. javascript获取dom的下一个节点方法

    需求说明: 获取当前节点左节点或者右节点(兄弟节点): css: <style type="text/css"> a:focus { outline: none; } ...

  2. javascript 获取下一个节点

    下一个节点: nextElementSibling 上一个节点 previousElementSibling <div> <select onchange="alert(t ...

  3. JavaScript获取HTML DOM节点元素详解(转)

    在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...

  4. [转]Javascript removeChild()删除节点及删除子节点的方法(同样适用于jq)

    Javascript removeChild()删除节点及删除子节点的方法 这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下 ...

  5. javascript 获取HTML DOM父、子、临近节点

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很 ...

  6. html5中JavaScript删除全部节点

    如果div里有这么些内容: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type ...

  7. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. Zookeeper命令行操作(常用命令；客户端连接；查看znode路径；创建节点；获取znode数据，查看节点内容，设置节点内容，删除节点；监听znode事件；telnet连接zookeeper)

    8.1.常用命令 启动ZK服务 bin/zkServer.sh start 查看ZK服务状态 bin/zkServer.sh status 停止ZK服务 bin/zkServer.sh stop 重启 ...

  9. java:利用xpath删除xml中的空节点

    原始xml内容: <data> <a> </a> <b>b1</b> <awb> <awbpre>123</a ...

随机推荐

  1. 关于C#中的 static

    一:感受 做商业项目才能更深刻和彻底的探索到技术的原理与真实面貌.以前在学校里面的时候这些C Sharp的基本语法,数据结构,面向对象背的滚瓜乱熟,那真得是背的!无论是从概念从理论上面来谈还是写一个小 ...

  2. Makefile的编写

    makefile介绍 makefile的功能是管理源文件的编译链接,在makefile我们可以定义一系列的规则来指定哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于进行更复杂的功能 ...

  3. linux(centOS)下安装Oracle步骤

    ##创建用户和组: [LanRS@localhost ~]$ su root #切换到root Password: [root@localhost LanRS]# groupadd oinstall ...

  4. SQL SERVER 2008 获取表字段的类型

    SELECT * FROM ( select a.name TABLENAME,b.name FIELDNAME,c.name FIELDTYPE,c.length FIELDLENGTH from ...

  5. 使用winshark分析三次握手，四次挥手

    三次握手 ip 106.120.167.67捕获的数据 数据信息   分析: 从图中可以看出,前三条为三次握手过程,使用TCP协议. 结合图,第一条为建立连接请求,客户端向服务器发送SYN=1的报文, ...

  6. 从C++实现Ping开始说起

    在C++中实现ping功能,并不难.但真正了解ping是需要花费一番功夫的. Ping功能是在ICMP基础上实现的.IP协议并不是一个可靠的协议,它不保证数据被送达,那么,保证数据送达的工作应该由其他 ...

  7. Java基础高级二（多线程）

    1.进程和线程的区别:线程是轻量级的,本省不会持太多资源,需要的时候向进程申请 2.线程的状态:创建,可执行,执行中,等待,休眠,阻塞 3.线程状态之间的转换 4.线程API:Thread类,Runn ...

  8. excel小技巧

    数据呈文本格式,怎么改成数字? 数据前有'号,如何去掉? 为什么数据格式在修改后需要再双击一下单元格才改过来了? 解决办法:你选中需要更改格式的那列              数据          ...

  9. 搭建Nginx+Java环境测试并且运行

    一.简介: Tomcat在高并发环境下处理动态请求时性能很低,而在处理静态页面更加脆弱.虽然Tomcat的最新版本支持epoll,但是通过Nginx来处理静态页面要比通过Tomcat处理在性能方面好很 ...

  10. C# DataSet装换为泛型集合

    1.DataSet装换为泛型集合(注意T实体的属性其字段类型与dataset字段类型一一对应) #region DataSet装换为泛型集合 /// <summary> /// 利用反射和 ...