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

javascript 专栏收录该内容
4 篇文章 0 订阅

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() 测试该子节点内容是否为空

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值