在JavaScript中一个关于DOM遍历的对象是NodeIterator, 用它可以对DOM书进行深度优先的搜索(DOM标准,但IE不支持,IE8实测)。 搜索过程中可以使用nextNode()和previousNode()方法。 要创建NodeIterator对象,使用document对象的createNodeIterator()方法。此方法接受4个参数: root——从树中开始搜索的那个节点。whatToShow——一个述职代码,代表那些节点需要访问。filter——NodeFilter对象,用来决定需要忽略哪些节点。entityReferenceExpansion——布尔值,表示是否需要扩展实体引用。 example: html内容:
<body><div id="div1"><p>Hello <b>World!</b></p><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul></div><textarea rows="10" cols="40" id="text1"></textarea><br /><input type="button" value="Make List" οnclick="makeList()" /></body>
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或许是很不错的选择~