本文介绍了一种在不使用 innerHTML 的情况下，安全地在 DOM 中替换占位符的方法。通过使用 NodeIterator，我们可以直接操作文本节点和元素属性，从而避免移除已绑定的事件监听器，保证网页的正常功能。同时，我们还提供示例代码，展示如何在 JavaScript 中实现这一功能，并讨论了需要注意的事项。
使用 NodeIterator 替换文本节点
直接修改 document.body.innerHTML 会导致所有元素的事件监听器丢失，这在许多情况下是不可接受的。一个更安全的方法是使用 NodeIterator 来遍历 DOM 树，找到文本节点，并直接在这些节点上进行替换。
以下是一个示例代码，展示了如何使用 NodeIterator 替换文本节点中的占位符：
在这个示例中：
我们首先定义了要搜索的字符串 (search) 和替换字符串 (replacement)。
然后，我们使用 document.createNodeIterator 创建了一个 NodeIterator，它只遍历文本节点 (NodeFilter.SHOW_TEXT)。
textIterator.nextNode() 方法用于迭代每一个文本节点。
在 while 循环中，我们使用 replaceAll 方法替换每个文本节点中的占位符。
我们也使用 document.createNodeIterator 创建了一个 NodeIterator，它只遍历元素节点 (NodeFilter.SHOW_ELEMENT)。
elemIterator.nextNode() 方法用于迭代每一个元素节点。
在 while 循环中，我们迭代元素节点的每一个属性，并替换每个属性中的占位符。
以下是 HTML 示例代码：
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
以下是 CSS 示例代码：
以下是 JavaScript 示例代码：
注意事项
替换范围：
上述代码会替换整个 document.body 中的文本，包括
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));
});
}
});
these items are clickable
- this list is boring
- boring things are very boring
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;
}[...document.querySelectorAll('li')].forEach(li => li.addEventListener('click', () => li.innerText+= " CLICK"));