在 DOM 中安全替换占位符：避免移除事件监听器

本文介绍了一种在不使用 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));

      });
    }
});

在这个示例中：

1. 我们首先定义了要搜索的字符串 (search) 和替换字符串 (replacement)。
2. 然后，我们使用 document.createNodeIterator 创建了一个 NodeIterator，它只遍历文本节点 (NodeFilter.SHOW_TEXT)。
3. textIterator.nextNode() 方法用于迭代每一个文本节点。
4. 在 while 循环中，我们使用 replaceAll 方法替换每个文本节点中的占位符。
5. 我们也使用 document.createNodeIterator 创建了一个 NodeIterator，它只遍历元素节点 (NodeFilter.SHOW_ELEMENT)。
6. elemIterator.nextNode() 方法用于迭代每一个元素节点。
7. 在 while 循环中，我们迭代元素节点的每一个属性，并替换每个属性中的占位符。

以下是 HTML 示例代码：

知识画家

AI交互知识生成引擎，一句话生成知识视频、动画和应用

下载

  
these items are clickable
  

    
this list is boring
    
boring things are very boring
   


Replace now

以下是 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 中的文本，包括
• 注释： 上述代码不会替换 HTML 注释中的文本。如果需要替换注释中的文本，可以使用 NodeFilter.SHOW_COMMENT。
• 标签名： 无法直接替换标签名，因为这需要创建新的元素。如果需要替换标签名，需要手动创建新元素，并将事件监听器从旧元素复制到新元素。
• 性能： 对于大型 DOM 树，NodeIterator 的遍历可能会影响性能。可以考虑使用 DocumentFragment 来批量更新 DOM，以提高性能。

总结

使用 NodeIterator 可以在不移除事件监听器的情况下，安全地在 DOM 中替换占位符。这种方法比直接修改 innerHTML 更安全，并且可以避免许多潜在的问题。通过合理地使用 NodeFilter 和其他技巧，可以进一步优化代码，以满足特定的需求。