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>
