Js中的createNodeIterator · 前端押題寶典

>[danger]介紹一下Js中的createNodeIterator `createNodeIterator()` 方法是 DOM API 中的一個方法，用于創建一個 NodeIterator 對象，可以用于遍歷文檔樹中的一組 DOM 節點。通俗一點來講就是它可以遍歷 DOM 結構，把 DOM 變成可遍歷的。 **這種方法算是一個比較偏的面試考點**，面試官問你怎樣實現遍歷 DOM 結構？其實就可以用到這個方法。但是大多數程序員答不上來這個問題，因為我們在日常開發中這個方法用得極少。這個方法常在框架源碼中體現。 >[info]應用場景 ~~~ <body> <div id="app"> <p>hello</p> <div class="title">標題</div> <div> <div class="content">內容</div> </div> </div> <script> const body = document.getElementsByTagName('body')[0] const item = document.createNodeIterator(body)//讓body變成可遍歷的 let root = item.nextNode() // 下一層 while (root) { console.log(root); if (root.nodeType !== 3) { root.setAttribute('data-index', 123)//給每個節點添加一個屬性 } root = item.nextNode() } </script> </body> ~~~ 上面代碼成功遍歷到了各個 DOM 結構： ![](https://img.kancloud.cn/e0/db/e0db3c3a2322d3f8bc430b1ab0c0af44_673x442.png) 并且在每個 DOM 節點上都添加了`data-index = "123"`。