dom 获取子节点 删除非空节点

dom 获取子节点 删除非空节点

最近遇到了了，这个问题，但是好像没有搜到详细解释这个原因的代码，所以我稍微自己顺便写了一下笔记

首先送上我们的html 代码

<table>   
    <tr>   
    <td id="TEST">  
        <input type="submit" value="确定"/>  
        <input type="button" value="取消"/>  
    </td>  
    </tr>   
</table>  

现在我们用 JS 来获取我们的 td 的子节点个数

var td = document.getElementById("TEST");  
console.log(td.childNodes.length)      // 结果为5

因为，当我获取的时候，childNodes 会回去下面的所有子节点，包括 制表符 空格 等

解决办法

function cleanWhitespacE(element){
        for(var i; i<element.childNodes.length; i++){
            var node = element.childNodes[i];
            if(node.nodeType==3 && !/\S/.test(node.nodeValue)){
                node.parentNode.removeChild(node);
            }
        }
    }

element 为传入一个父节点内容

建立一个for循环语句，将 父节点 下面的子节点遍历出来，

例如第一次执行的时候， 我们设置 子节点的 值为 node

如果 nodyType==3 （nodeType=3 Text 代表元素或属性中的文本内容 None）

http://www.w3school.com.cn/jsref/prop_node_nodetype.asp

/\S/ : 一个非空的正则表达式 !(非空) = 空 test() 测试该子节点内容是否为空

如果等于 空值 的时候 ，将改节点删除，就过滤掉了