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. MySQL 应用优化

    一.使用连接池 二.减少对MySQL的访问 (A) 避免对同一数据做重复检索. (B) 使用查询缓存,MySQL的查询缓存会存储SELECT查询的命令文本和相应的结果. (C) 增加CACHE层 三. ...

  2. vs2015全新nuget使用全析

    随着vs2015正式版本的发布,实在按捺不住,安装体验了一把,感触最大的除了可以调试lamda以外莫过于对nuget的升级. 先来一张全景: 怎么样,风格完全不同了吧.可以显示预发行版本了,右上角那个 ...

  3. 对前台传回的list进行分割，并放在sql语句的in中

    前端数据集传回数据 var matDeptHisMonthPlanStore = Ext.data.StoreManager.lookup('matDeptHisMonthPlanStore'); m ...

  4. 请不要重复犯我在学习Python和Linux系统上的错误

    本人已经在运维行业工作了将近十年,我最早接触Linux是在大二的样子,那时候只追求易懂,所以就选择了Ubuntu作为学习.使用的对象,它简单.易用.好操作.界面绚丽,对于想接触Linux的新手来说是非 ...

  5. Redis 3.0 Cluster集群配置

    Redis 3.0 Cluster集群配置 安装环境依赖 安装gcc:yum install gcc 安装zlib:yum install zib 安装ruby:yum install ruby 安装 ...

  6. win7系统下的飞秋发送文件失败问题

    飞秋发送文件失败这个问题大多数是由防火墙引起的1.检查windows自带的防火墙设置,在左侧的"允许程序通过windows防火墙"查看飞秋是否存在,不存在则增加之,公网.专网都勾选 ...

  7. PEAR安装

    看到PEAR章节,提到安装PEAR需要go-pear.bat,我机器上的PHP(v7.0.8)目录下,并没有go-pear.bat这个文件,网上查了一遍,怎么说的都有,最后还是在官网上找到解决方案. ...

  8. 编译osgEarth2.8+VS2013+CMake3.4.0在Release版本的问题

    1>LINK : fatal error LNK1181: 无法打开输入文件"optimized.lib" 可以到http://forum.osgearth.org搜索相关帖 ...

  9. Unity Animation System（动画系统）

    动画系统: 支持:动画融合,混合,叠加动画,行走循环的时间同步,动画层,控制动画的各个方面(时间,速度,融合权重)   带有每顶点1.2或4骨骼的蒙皮网格,以及支持基于物理的布娃娃系统和程序动画.   ...

  10. **crontab的使用方式介绍和no crontab for root 提示的处理

    crontab的使用方式介绍   定时任务参数详解如下:  crontab -l     |  crontab -e    www.2cto.com   #*/30 * * * * ntpdate 1 ...