获取html节点时过滤空白节点

在非 IE 中，标准的 DOM 具有识别空白文本节点的功能，而 IE 自动忽略了，如果要保持一致的子元素节点，需要手工忽略掉它。

var body = document.getElementsByTagName('body')[0]; // 获取 body 元素节点

//过滤空白节点

function filterSpaceNode(nodes) {

var ret = []; // 新数组

for (var i = 0; i < nodes.length; i ++) {

// 如果识别到空白文本节点，就不添加数组

if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) continue;

// 把每次的元素节点，添加到数组里

ret.push(nodes[i]);

}

return ret;

}

上面的方法，采用的忽略空白文件节点的方法，把得到元素节点累加到数组里返

回。那么还有一种做法是，直接删除空位文件节点即可。

function filterSpaceNode(nodes) {

for (var i = 0; i < nodes.length; i ++) {

if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) {

// 得到空白节点之后，移到父节点上，删除子节点

nodes[i].parentNode.removeChild(nodes[i]);

}

}

return nodes;

}

如果 firstChild 、 lastChild 、 previousSibling 和 nextSibling 在获取节点的过程中遇到

空白节点，我们该怎么处理掉呢？

function removeWhiteNode(nodes) {

for (var i = 0; i < nodes.childNodes.length; i ++) {

if (nodes.childNodes[i].nodeType === 3 &&

/^\s+$/.test(nodes.childNodes[i].nodeValue)) {

nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);

}

}

return nodes;

}