javascript获取childNodes详情，删除空节点

时间：2022-05-24 10:11:52
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下的子元素节点，有七个节点，如图：

javascript获取childNodes详情，删除空节点

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

<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>
运行结果如下：
javascript获取childNodes详情，删除空节点
总结：
页面上是由无数个节点组成，而childNodes是获取到所有的节点，要想得到自己想要的节点，需要经过处理。
javascript获取childNodes详情，删除空节点