DOM变化（遍历） 

 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>

 

posted @ 2017-11-09 15:47  gaoxuerong  阅读(203)  评论(0)    收藏  举报