Javascript 有效检测单页应用程序中的DOM更改

我正在构建一个JS库，其中一个用例要求我在DOM更改时触发一个事件，特别是当它是一个单页应用程序时，例如： 经过一些研究，我遇到了一个变种观察者：

问题：我正在构建的库是为插入任何网站而设计的，因此我无法控制html实现。我有点担心使用变异观察器可能会进入无限循环。在同一行上看到了许多堆栈溢出问题

是否有其他/更好的方法？如何安全高效地检测DOM更新/更改？或者突变观察者是最佳选择

可能是你的最佳选择。在MutationObserver之前，有，但现在不推荐使用，不推荐使用

另一个可能较差的选择是使用setTimeout并定期检查DOM的更改。但这需要编写一个函数来获取要检查的节点，并将当前值与旧值进行比较。这将没有那么有效，因为即使没有更改，您也会每隔X毫秒检查一次节点

您应该能够以不出现无限循环的方式编写代码。如果你得到一个无限循环，你应该在上面的问题中添加这个代码

就性能而言，由于MutationObserver将提供新旧值，因此可以比较这些值，而不是遍历整个DOM。例如，类似这样的内容：

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    let oldValue = mutation.oldValue;
    let newValue = mutation.target.textContent;
    if (oldValue !== newValue) {
        // do something
    }
  });
});

observer.observe(document.body, {
  characterDataOldValue: true, 
  subtree: true, 
  childList: true, 
  characterData: true
});

---

最有效的方法是由更新dom的代码调用，而不是自己监听更改。但显然你不能/不想那样做。那么，代码需要检测哪些更新？我们谈论的是什么样的dom更改？谁将库插入他们的网站？如何插入？@Bergi是一个搜索栏，显示结果，就像我上面展示的github示例一样。如果在查询更改时更新搜索，我需要检测那些新的刷新结果。我不知道搜索栏是什么意思，也不知道这与作为示例链接的standardjs linter/formatter有什么关系。谁更新查询或刷新结果，您的代码如何处理它们？

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    let oldValue = mutation.oldValue;
    let newValue = mutation.target.textContent;
    if (oldValue !== newValue) {
        // do something
    }
  });
});

observer.observe(document.body, {
  characterDataOldValue: true, 
  subtree: true, 
  childList: true, 
  characterData: true
});