代码解释：
- 创建 NodeIterator： document.createNodeIterator() 函数用于创建 NodeIterator 对象。第一个参数指定了遍历的根节点，第二个参数 NodeFilter.SHOW_TEXT 指定了只遍历文本节点。NodeFilter.SHOW_ELEMENT 指定只遍历元素节点。
- 遍历节点： textIterator.nextNode() 方法用于获取下一个文本节点。循环会持续到所有文本节点都被遍历。
- 替换文本： textNode.data 属性包含了文本节点的内容。使用 replaceAll() 方法替换占位符。
- 替换属性： 遍历所有元素的属性，并替换其中的占位符。
HTML 示例:
<div id="content" class="boring">
<p>these items are clickable</p>
<ul class="list boring">
<li>this list is boring</li>
<li>boring things are very boring</li>
</ul>
</div>
<button>Replace now</button>CSS 示例:
ul.boring {
background-color: beige;
}
ul.awesome {
background-color: yellow;
color: red;
border: 5px solid blue;
}
#content.boring {
background-color: #f1f1f1;
}
#content.awesome {
background-color: lime;
}注意事项：
- 性能： 对于大型DOM树，遍历所有节点可能会影响性能。可以考虑使用更高效的选择器或仅遍历需要替换的特定区域。
- 特殊标签： 上述代码会替换所有文本节点中的占位符，包括 <style> 标签中的内容。如果需要排除特定标签，可以使用第三个参数传递一个过滤函数给createNodeIterator。
- 注释： 上述代码不会替换注释中的文本。如果需要替换注释中的文本，需要使用 NodeFilter.SHOW_COMMENT。
- 标签名： 此方法无法替换标签名中的文本，因为这需要创建新的元素并重新添加事件监听器。
总结
通过使用 NodeIterator，我们可以在不移除事件监听器的情况下，安全地替换DOM中的占位符。这种方法避免了使用 innerHTML 带来的副作用，并保持了网页的交互性。在实际开发中，需要根据具体情况进行调整，例如排除特定标签或优化性能。
