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. css中margin的应用

    1.margin用于设置外边距,没有继承性,父元素设置的margin属性子元素不会继承. 2.margin存在重叠的问题. 水平边距永远不会发生重叠. 垂直边距在特定情况下会重叠. 重叠问题都很容易解 ...

  2. python之路十二

    本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 创建数据库 外键 增删改查表 权限 事务 索引 python 操作mysql ORM sql ...

  3. infoq 微信后台存储架构

    infoq 上微信后台存储架构 视频很是值得认真一听,大概内容摘要如下: 主要内容:同城分布式强一致,园区级容灾KV存储系统 - sync 序列号发生器      移动互联网场景下,频繁掉线重连,使用 ...

  4. SDWebImage清理图片缓存方法

    //获取当前缓存大小 @property (nonatomic, assign) NSUInteger tmpSize; //获取缓存大小并储存 _tmpSize=[[SDImageCache sha ...

  5. 【webGL】threejs常用的api

    /*** 场景(scene) ***/ var scene = new THREE.Scene(); // 创建场景 scene.add(x); // 插入场景 /*** 相机(camera) *** ...

  6. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. C语言 关于内存动态分配问题

    全局变量:分配到 内存的静态区. 局部变量(非静态):分配到 内存的动态区.在存储区中称为栈(stack) 临时数据(C允许内存动态分配区域):存放在自由空间区,称为堆区(heap) 内存动态分配 得 ...

  8. Android开发之MVP模式的使用

    前几天发现,在Android项目代码里有一个Activity类行数居然有1000多行,而600行左右都是逻辑控制,真正和页面控件处理相关的代码不多,虽然可以用#region <>...#e ...

  9. Datazen笔记索引

      Datazen介绍 http://www.cnblogs.com/aspnetx/p/4557547.html   Datazen安装 http://www.cnblogs.com/aspnetx ...

  10. HDU 5754 Life Winner Bo 组合博弈

    Life Winner Bo Problem Description   Bo is a "Life Winner".He likes playing chessboard gam ...