本文介绍了一种在不使用 innerHTML 的情况下，安全地在 DOM 中替换占位符的方法。通过使用 NodeIterator，我们可以直接操作文本节点和元素属性，从而避免移除已绑定的事件监听器，保证网页的正常功能。同时，我们还提供示例代码，展示如何在 JavaScript 中实现这一功能，并讨论了需要注意的事项。
使用 NodeIterator 替换文本节点
直接修改 document.body.innerHTML 会导致所有元素的事件监听器丢失，这在许多情况下是不可接受的。一个更安全的方法是使用 NodeIterator 来遍历 DOM 树，找到文本节点，并直接在这些节点上进行替换。
以下是一个示例代码，展示了如何使用 NodeIterator 替换文本节点中的占位符：
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));
});
}
});在这个示例中：
- 我们首先定义了要搜索的字符串 (search) 和替换字符串 (replacement)。
- 然后，我们使用 document.createNodeIterator 创建了一个 NodeIterator，它只遍历文本节点 (NodeFilter.SHOW_TEXT)。
- textIterator.nextNode() 方法用于迭代每一个文本节点。
- 在 while 循环中，我们使用 replaceAll 方法替换每个文本节点中的占位符。
- 我们也使用 document.createNodeIterator 创建了一个 NodeIterator，它只遍历元素节点 (NodeFilter.SHOW_ELEMENT)。
- elemIterator.nextNode() 方法用于迭代每一个元素节点。
- 在 while 循环中，我们迭代元素节点的每一个属性，并替换每个属性中的占位符。
以下是 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;
}以下是 JavaScript 示例代码：
[...document.querySelectorAll('li')].forEach(li => li.addEventListener('click', () => li.innerText+= " CLICK"));注意事项
- 替换范围： 上述代码会替换整个 document.body 中的文本，包括 <style> 标签内的文本。如果需要排除某些标签，可以使用 NodeFilter 的第三个参数传递一个过滤函数。 developer.mozilla.org/en-US/docs/Web/API/Document/createNodeIterator 提供了更多信息。
- 注释： 上述代码不会替换 HTML 注释中的文本。如果需要替换注释中的文本，可以使用 NodeFilter.SHOW_COMMENT。
- 标签名： 无法直接替换标签名，因为这需要创建新的元素。如果需要替换标签名，需要手动创建新元素，并将事件监听器从旧元素复制到新元素。
- 性能： 对于大型 DOM 树，NodeIterator 的遍历可能会影响性能。可以考虑使用 DocumentFragment 来批量更新 DOM，以提高性能。
总结
使用 NodeIterator 可以在不移除事件监听器的情况下，安全地在 DOM 中替换占位符。这种方法比直接修改 innerHTML 更安全，并且可以避免许多潜在的问题。通过合理地使用 NodeFilter 和其他技巧，可以进一步优化代码，以满足特定的需求。
