技术专栏
合作公告  /   公司新闻  /   知识讲堂  /   技术专栏

使用childNodes属性获取子节点需注意的一点

发布时间:2016-11-12 14:25:38  发布者:赵小东  浏览次数:

在用childNodes属性获取子节点列表时我们会返回一个NodeList的对象,其属性length的值一般会大于实际节点的数目,例如:

html代码为

<div id="box">
  <p>1</p>
  <p>2</p>
<p>3</p>
</div>

JS代码为

var box = document.getElementById('box');
alert(box.childNodes.length); //返回7

经测试返回7,并非我们期望的到3,这是什么原因呢?

原来,在w3c标准中,标签之间的换行或者空格都被算作一个文本节点,而我们在box的子节点列表中,刚好有4个换行,为了方便操作节点我们需要删除这些空白的文本节点,下面分别给出2个函数来解决这个问题。

1.过滤掉空白节点

function filterWhiteNodes(node) {
var newNode = [];
for (var i = 0; i < node.length; i++) {
if (node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)) { //当该节点为文本节点,且其nodeValue值为一个或多个空格,直接进行下次循环
continue;
} else {
newNode.push(node[i]); //将非空文本节点放入新的数组
}
}
return newNode;
}

2.删除空白节点

function removeWhiteNodes(node) {
for (var i = 0; i < node.length; i++) {
if (node[i].nodeType == 3 && /^\s+$/g.test(node[i].nodeValue)) {
node[i].parentNode.removeChild(node[i]);
}
}
return node;
}
上一个:resize() 如何监听div或其它元素的resize事件