|
|
|
DOM将一个HTML文档解析为树状结构，并提供相应的方案来遍历整个HTML文档树。两个遍历树的例子。
这个例子使用了childNodes[]和递归方式来遍历整个文档，统计文档中出现的Element元素总数，并把Element标记名全部打印出来。
sample4_12.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch04--统计Element节点总数</title>
<script language="javascript">
var elementName = ""; //全局变量，保存Element标记名，使用完毕要清空
function countTotalElement(node) { //参数node是一个Node对象
var total = 0;
if(node.nodeType == 1) { //检查node是否为Element对象
total++; //如果是，计数器加1
elementName = elementName + node.tagName + "\r\n"; //保存标记名
}
var childrens = node.childNodes; //获取node的全部子节点
for(var i=0;i<childrens.length;i++) {
total += countTotalElement(childrens); //在每个子节点上进行递归操作
}
return total;
}
</script>
</head>
<body>
<table width="100" border="1" cellpadding="0" cellspacing="0">
<tr><td>
<form name="form1" action="" method="post">
<input type="text" name="input1" value=""><br>
<input type="password" name="password1" value="">
</form>
</td></tr>
</table>
<a href="javascript:void(0)" onClick="alert('标记总数：' + countTotalElement (document) + '\r\n全部标记如下：\r\n' + elementName); elementName='';">开始统计</a>
</body>
</html>
注意事项：
1、在使用DOM时，必须等文档被装载完毕再执行遍历等行为操作文档。
2、<tbody>标记并没有被使用，但是在统计Element节点总数的时候，<tbody>还是被统计进来了。因为如果没有显式地指定<tr>所属的<thead>、<tbody>或者<tfoot>，则HTML将<tr>标记置入一个默认的<tbody>标签内加以解析。另外，<thead>、<tbody>和<tfoot>标记在一个表格标记内部只能分别有一个。
则使用firstChile、lastChild、nextSibling、previousSibling等树状遍历整个文档树。
sample4_13.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch04--统计Element节点总数</title>
<script language="javascript">
var elementName = ""; //全局变量，保存Element标记名，使用完毕要清空
function countTotalElement(node) { //参数node是一个Node对象
var total = 0;
if(node.nodeType == 1) { //检查node是否为Element对象
total++; //如果是，计数器加1
elementName = elementName + node.tagName + "\r\n"; //保存标记名
}
for(var m=node.firstChild; m!=null;m=m.nextSibling) {
total += countTotalElement(m); //在每个子节点上进行递归操作
}
return total;
}
</script>
</head>
<body>
<table width="100" border="1" cellpadding="0" cellspacing="0">
<tr><td>
<form name="form1" action="" method="post">
<input type="text" name="input1" value=""><br>
<input type="password" name="password1" value="">
</form>
</td></tr>
</table>
<a href="javascript:void(0)" onClick="alert('标记总数：' + countTotalElement (document) + '\r\n全部标记如下：\r\n' + elementName); elementName='';">开始统计</a>
</body>
</html> |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2012-3-13 21:03:34