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

使用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事件