DOM信息nodeType的应用

本文介绍了使用DOM节点的nodeType属性来过滤出特定类型节点的方法。并且举了一个统计文档内所有元素节点的实例。

使用DOM时一个很奇怪（也很恼人）的情况就是连代码中的换行都可能会被视为节点。以下面的HTML代码为例。

HTML代码

代码如下，我们可以清楚地看到div节点内只有一个段落。

<div id="test">
	<p>我是测试段落</p>
</div>
<div id="result">&nbsp;</div>

JavaScript代码

之后我们使用下面的JavaScript代码来显示id为test的div的子节点。首先，我们使用getElementById获得id为test的节点。之后使用childNodes获得它的子结点。最后在id为result的节点中显示这些子结点的节点名称和节点类型。

<script type="text/javascript">
function test(){
	var str = "";
	var nodes = document.getElementById("test").childNodes;
	for( var i = 0;i < nodes.length; i++){
		str += nodes[i].nodeName;
		str += ":";
		str += nodes[i].nodeType;
		str += "<br />";
	}
	document.getElementById("result").innerHTML = str;
}
</script>

nodeType的应用

点击下面的按钮就可以看到您所使用的浏览器认为这个div有几个子结点。

 

我是测试段落

P:1

在FireFox下，得到如下的结果：

#text:3
P:1
#text:3

在IE下，得到如下结果：

P:1

可见，在FireFox中，代码中的换行也被认为是一个类型为1，名字为#text的节点。但是通常我们对代码中的换行并不感兴趣。这时我们就可以使用nodeType来过滤掉这类不需要的元素。使用下面的JS代码就可以实现了。

for( var i = 0;i < nodes.length; i++){
	if(nodes[i].nodeType == 1){
	//代码，只有在节点为元素节点的时候才执行
	}
}

遍历文档所有的元素节点

下面我们在来看一段使用nodeType的JS代码。它的功能是遍历文档中所有的元素节点，并且统计元素节点的总数。当然我们以可以修改代码来对这些元素节点做任何操作。JavaScript代码如下：

<script type="text/javascript">
function countElements(node){
	var total = 0;
	if(node.nodeType == 1){ total +=1; }
	var children = node.childNodes;
	for(var i = 0;i < children.length; i++){
		total += countElements(children[i]);
	}
	return total;
}
function test2(){
	var elementsCount = countElements(document);
	alert(elementsCount);
}
</script>

点击上面的按钮就可以看到这个网页的总元素节点数了。