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. java基础 绘图技术.坦克大战 之java绘图坐标体系（二）

    功能:在坐标系上绘制坦克 /* * 功能:坦克游戏的1.0 * 1. 画出坦克 * */ package com.tank; import javax.swing.*; import java.awt ...

  2. 如何灵活运用Linux 进程资源监控和进程限制

    导读 每个 Linux 系统管理员都应该知道如何验证硬件.资源和主要进程的完整性和可用性.另外,基于每个用户设置资源限制也是其中一项必备技能. 在这篇文章中,我们会介绍一些能够确保系统硬件和软件正常工 ...

  3. 【POJ2104】K-th Number

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABToAAAJ2CAIAAADwi6oDAAAgAElEQVR4nOy9a5Pj1nnvi0/Q71Llj3

  4. apple常用网址

    https://developer.apple.com/ https://itunesconnect.apple.com/ iTunes Connect Developer Guide https:/ ...

  5. spring framework核心框架体系结构

    很实用,稀里糊涂的我算是看清了. 很多人都在用spring开发java项目,但是配置maven依赖的时候并不能明确要配置哪些spring的jar,经常是胡乱添加一堆,编译或运行报错就继续配置jar依赖 ...

  6. DateUtil（SimpleDateFormat）

    import java.util.Calendar; import java.util.Date; import java.text.SimpleDateFormat; public class Da ...

  7. ecshop不同文章分类调用不同文章分类模板

    根据需要,不同的文章分类会有不一样的页面风格.也就是说根据文章分类ID来判断,输出不同的文章分类模板. 重点就是文章分类的ID. 打开:article_cat.php $smarty->disp ...

  8. 编译安装 varnish-4.1.2和yum 安装 varnish-4.0.3

    vanish可以让用户自己选择缓存数据是存于内存还是硬盘,存于内存一般基于二八法则即常访问的数据是磁盘存储的总数据五分之一,因此内存也应该是硬盘文件大概五分之一.如果有多台vanish则,总内存满足即 ...

  9. MysqlNDB集群配置

    为了避免不必要的资源分配,默认情况下是不启动ndbcluster引擎.

  10. iOS之小门道道

    1.代理方法不执行 很多时候在你代理方法不执行时,小样,你看看你设置代理了吗?