删除node节点中的空白text节点

首先面向百度编程(JS获取节点的兄弟,父级,子级元素)获得代码:

1
2
3
4
5
6
7
8
function del_ff(elem){  // 创建函数del_ff,传值为包含空白text节点的父节点
  var elem_child = elem.childNodes;  // 获取该节点下的所有node节点,自然包含空白text节点
  for(var i=0; i<elem_child.length;i++){  // 遍历该父节点
    if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue)) {  // 对每个节点进行非空判断
      elem.removeChild(elem_child)  // 删除空白节点
    }
  }
}

首先指出该代码的错误,在进行非空判断的时候,第二个条件应该这样写:

/^\s+$/.test(elem_child[i].nodeValue)
  1. 去掉句首的"!",因为该语句是用test方法判断nodeValue中是否存在换行符,存在则返回true。而使用!运算会将true变为false,达到了相反的效果。
  2. 把/\s/正则表达式改为/^\s+$/,作用是防止元素之外有文字内容的情况,不然会连文字一起删掉。
  3. 在elem_child后面加上[i],低级错误,在结尾的removeChild处同样如此。

    1
    2
    3
    4
    5
    <div class="a">
      <div></div>
      我不想被删掉
      <div></div>
    </div>
 通过CSS改变图片颜色
周记 
上一篇:通过CSS改变图片颜色
下一篇:周记