JavaScript遍历DOM
2010-10-29 17:13
253 查看
在JavaScript中一个关于DOM遍历的对象是NodeIterator, 用它可以对DOM书进行深度优先的搜索(DOM标准,但IE不支持,IE8实测)。
搜索过程中可以使用nextNode()和previousNode()方法。
要创建NodeIterator对象,使用document对象的createNodeIterator()方法。此方法接受4个参数:
root——从树中开始搜索的那个节点。
whatToShow——一个述职代码,代表那些节点需要访问。
filter——NodeFilter对象,用来决定需要忽略哪些节点。
entityReferenceExpansion——布尔值,表示是否需要扩展实体引用。
example:
html内容:
Web前端浏览器兼容性问题确实令人头疼,用jQuery或许是很不错的选择~
搜索过程中可以使用nextNode()和previousNode()方法。
要创建NodeIterator对象,使用document对象的createNodeIterator()方法。此方法接受4个参数:
root——从树中开始搜索的那个节点。
whatToShow——一个述职代码,代表那些节点需要访问。
filter——NodeFilter对象,用来决定需要忽略哪些节点。
entityReferenceExpansion——布尔值,表示是否需要扩展实体引用。
example:
html内容:
JavaScript内容:<script type="text/javascript"> var iterator = null; function makeList() { var oDiv = document.getElementById("div1"); //div1为开始遍历的节点 var oFilter = new Object; oFilter.acceptNode = function (oNode) { return (oNode.tagName == "P") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT; //在结果中不想包含<p/>元素,需要用此NodeFilter对象,它只有acceptNode()一个方法 }; iterator = document.createNodeIterator(oDiv, NodeFilter.SHOW_ELEMENT, oFilter, false); //创建NodeIterator对象 var oOutput = document.getElementById("text1"); var oNode = iterator.nextNode(); while (oNode) { oOutput.value += oNode.tagName + "n"; oNode = iterator.nextNode(); } } </script>
另外可以使用TreeWalker对象(IE同样不支持...),它有NodeIterator所有的功能,还添加了一些遍历的方法:
parentNode()——进入当前节点的父节点
firstChild()——进入当前节点的第一个子节点
lastChild()——进入当前节点的最后一个子节点
nextSibling()——进入当前节点的下一个兄弟节点
previousSibling()——进入当前节点的前一个兄弟节点
example:(html同上)
<script type="text/javascript">
var walker = null;
function makeList() {
var oDiv = document.getElementById("div1");
walker = document.createTreeWalker(oDiv, NodeFilter.SHOW_ELEMENT, null, false);
var oOutput = document.getElementById("text1");
walker.firstChild(); //go to <p>
walker.nextSibling(); //go to <ul>
oNode = walker.firstChild(); //go to <li>
while (oNode) {
oOutput.value += oNode.tagName + "n";
oNode = walker.nextSibling();
}
}
</script>
Web前端浏览器兼容性问题确实令人头疼,用jQuery或许是很不错的选择~
相关文章推荐
- 从零开始构建JavaScript框架3——DOM遍历1
- JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)
- javascript写的贪吃蛇(循环遍历DOM思路,非数组)
- JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
- 从零开始构建JavaScript框架4——DOM遍历2
- 用JavaScript语言通过DOM遍历XML文档
- JavaScript高级程序设计之DOM 扩展之元素遍历第11.2讲
- JavaScript 遍历DOM
- JavaScript 遍历DOM
- Javascript Dom树遍历
- 最常见的JavaScript DOM方法实战-文档遍历 | CSSrainbow.cn
- javascript遍历DOM结构和对象结构
- javascript dom-文档结构和遍历
- javascript递归遍历所有DOM文档节点
- javascript DOM 遍历
- 说说在 DOM 扩展中,JavaScript 如何对 DOM 元素进行遍历
- 书:"Pro JavaScript Techniques 精通JavaScript"之简单的DOM遍历
- javascript DOM的操作,更新,遍历,添加
- JavaScript学习-DOM扩展_元素遍历
- Javascript遍历DOM和遍历属性