JavaScript高级程序设计 学习笔记之DOM基础(五)
8、遍历DOM (createNodeIterator)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
var iterator=null;
function makeList(){
var oDiv=document.getElementById("div1");//取得div元素
//第一个参数，从哪个节点开始搜索，第二个，哪些节点需要访问，目前是显示所有节点
//第三个，需要忽略哪些节点，目前指没有，第四个,是否需要扩展实体引用
iterator=document.createNodeIterator(oDiv,NodeFilter.SHOW_ELEMENT,null,false);//创建节点遍历
var oOutput=document.getElementById("text1");//获取 textarea元素
var oNode=iterator.nextNode();//是否有节点
while(oNode){
oOutput.value+=oNode.tagName+"\n";//将有节点的元素标签作为value显示在textarea中
oNode=iterator.nextNode();
}
}
</script>
</head>
<body >
<div id="div1">
<p>Hello<b>World!</b></p>
<ul>
<li>List item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>
</div>
<textarea rows="10" cols="40" id="text1"></textarea><br/>
<input type="button" value="制作列表" onclick="makeList()"/>
</body>
</html>
显示效果：
当点击按钮式，将所有的标签元素(注意：在火狐浏览器有效，不支持IE)
DIV
P
B
UL
LI
LI
LI
此外：TreeWalker也提供了，遍历节点的方法，比起NodeIterator还添加了些方法。具体查看帮助。