JavaScript遍历DOM
在JavaScript中一个关于DOM遍历的对象是NodeIterator, 用它可以对DOM书进行深度优先的搜索（DOM标准，但IE不支持，IE8实测）。
搜索过程中可以使用nextNode()和previousNode()方法。
要创建NodeIterator对象，使用document对象的createNodeIterator()方法。此方法接受4个参数：
- root——从树中开始搜索的那个节点。
- whatToShow——一个述职代码，代表那些节点需要访问。
- filter——NodeFilter对象，用来决定需要忽略哪些节点。
- entityReferenceExpansion——布尔值，表示是否需要扩展实体引用。
<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" onclick="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()——进入当前节点的前一个兄弟节点
<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或许是很不错的选择~
