1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM变化（遍历）</title> 6 </head> 7 <body> 8 <p> NodeIterator TreeWalker </p> 9 </body> 10 <script> 11 /* 12 IE 不支持 DOM 遍历。使用下列代码可以检测浏览器对 DOM2 级遍历能力的支持情况。 13 var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0"); 14 var supportsNodeIterator = (typeof document.createNodeIterator == "function"); 15 var supportsTreeWalker = (typeof document.createTreeWalker == "function"); 16 * */ 17 /* 18 NodeIterator 19 NodeIterator 类型的两个主要方法是 nextNode()和 previousNode()。顾名思义，在深度优先 20 的 DOM 子树遍历中，nextNode()方法用于向前前进一步，而 previousNode()用于向后后退一步。 21 在刚刚创建的 NodeIterator 对象中，有一个内部指针指向根节点，因此第一次调用 nextNode()会 22 返回根节点。当遍历到 DOM 子树的最后一个节点时，nextNode()返回 null。previousNode()方法 23 的工作机制类似。当遍历到 DOM 子树的最后一个节点，且 previousNode()返回根节点之后，再次调 24 用它就会返回 null。 25 * */ 26 /* 27 TreeWalker 是 NodeIterator 的一个更高级的版本。除了包括 nextNode()和 previousNode() 28 在内的相同的功能之外，这个类型还提供了下列用于在不同方向上遍历 DOM 结构的方法。 29 parentNode()：遍历到当前节点的父节点； 30 firstChild()：遍历到当前节点的第一个子节点； 31 lastChild()：遍历到当前节点的最后一个子节点； 32 nextSibling()：遍历到当前节点的下一个同辈节点； 33 previousSibling()：遍历到当前节点的上一个同辈节点。 34 * */ 35 </script> 36 </html>