您的位置：首页 > 其它

DOM2节点的遍历

2015-01-18 21:33 357 查看

1.NodeIterator的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
function aFuntion() {
var isSupportTraversals = document.implementation.hasFeature(
"Traversal", "2.0");
alert(isSupportTraversals);
//每个节点过滤器只有一个方法acceptNode
//或者一个类似于acceptNode()的函数
var filter = {
acceptNode : function(node) {
//alert(node.tagName);
return node.tagName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
};
var nodeIterator = document.createNodeIterator(document.getElementsByTagName("div").item(0),NodeFilter.SHOW_ELEMENT, filter, false);
//NodeIterator的两个主要方法
//nextNode()和previousNext()，在刚刚创建的NodeIterator对象中，有一个内部指针指向根节点，因此第一次调用nextNode()返回根节点
var alertMessage = "";
var node="";
while (node=nodeIterator.nextNode()) {
alertMessage += node.tagName;
alertMessage += "\n";
};
alert(alertMessage);
};
document.getElementsByTagName("input").item(0).addEventListener("click",aFuntion,false);
};
</script>
</head>
<body>
DOM2级遍历与范围：IteratorNode和TreeWalker这两个类型能够基于给定的起点DOM结构执行深度优先(depth-first)的遍历。<br><br>
<input type="button" value="点击触发遍历">
<div id="div1">
<p><b>Hello</b>World</p>
<ul>
<li>List item1</li>
<li>List item2</li>
<li>List item3</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航