本文旨在提供一种在不使用 `innerHTML` 的情况下，替换DOM中特定字符串的有效方法，从而避免移除已存在的事件监听器。通过使用 `NodeIterator`，我们可以直接操作文本节点和元素属性，实现占位符替换，同时保持网页的交互性。本文将提供详细的代码示例和注意事项，帮助开发者安全地实现DOM操作。 ### DOM占位符替换：避免 `innerHTML` 的陷阱 在前端开发中，经常需要动态地替换DOM中的特定字符串，例如占位符。一种常见的做法是使用 `innerHTML` 属性，但这会导致所有子元素的重新渲染，从而移除已附加的事件监听器。为了避免这种情况，我们需要采用一种更精细的方法，直接操作文本节点和元素属性。 ### 使用 `NodeIterator` 实现安全替换 `NodeIterator` 是一个接口，它表示一个文档或文档片段的节点集合的迭代器。 我们可以使用它来遍历DOM树，并选择性地替换文本节点中的内容。 以下代码演示了如何使用 `NodeIterator` 替换文本节点和元素属性中的占位符： “`javascript document.querySelector(‘button’).addEventListener(‘click’, () => { const search = “boring”; const replacement = “awesome”; // 替换文本节点 const textIterator = document.createNodeIterator( document.body, NodeFilter.SHOW_TEXT ); let textNode; while ((textNode = textIterator.nextNode())) { textNode.data = textNode.data.replaceAll( search, replacement); } // 替换元素属性 const elemIterator = document.createNodeIterator( document.body, NodeFilter.SHOW_ELEMENT ); let elemNode; while ((elemNode = elemIterator.nextNode())) { […elemNode.attributes].forEach((attr) => { elemNode.setAttribute(attr.name, attr.value.replace(search, replacement)); }); } });

代码解释：

1. 创建 NodeIterator： document.createNodeIterator() 函数用于创建 NodeIterator 对象。第一个参数指定了遍历的根节点，第二个参数 NodeFilter.SHOW_TEXT 指定了只遍历文本节点。NodeFilter.SHOW_ELEMENT 指定只遍历元素节点。
2. 遍历节点： textIterator.nextNode() 方法用于获取下一个文本节点。循环会持续到所有文本节点都被遍历。
3. 替换文本： textNode.data 属性包含了文本节点的内容。使用 replaceAll() 方法替换占位符。
4. 替换属性： 遍历所有元素的属性，并替换其中的占位符。

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; }

注意事项：

讯飞听见

讯飞听见依托科大讯飞的语音识别技术，为用户提供语音转文字、录音转文字等服务，1小时音频最快5分钟出稿，高效安全。

105

查看详情

• 性能： 对于大型DOM树，遍历所有节点可能会影响性能。可以考虑使用更高效的选择器或仅遍历需要替换的特定区域。
• 特殊标签： 上述代码会替换所有文本节点中的占位符，包括 <style> 标签中的内容。如果需要排除特定标签，可以使用第三个参数传递一个过滤函数给createNodeIterator。
• 注释： 上述代码不会替换注释中的文本。如果需要替换注释中的文本，需要使用 NodeFilter.SHOW_COMMENT。
• 标签名： 此方法无法替换标签名中的文本，因为这需要创建新的元素并重新添加事件监听器。

总结

通过使用 NodeIterator，我们可以在不移除事件监听器的情况下，安全地替换DOM中的占位符。这种方法避免了使用 innerHTML 带来的副作用，并保持了网页的交互性。在实际开发中，需要根据具体情况进行调整，例如排除特定标签或优化性能。