在被破坏的元素上使用mutationObservers的最佳方法答案

【问题标题】：Best approach for using mutationObservers on elements which get destroyed在被破坏的元素上使用mutationObservers的最佳方法
【发布时间】：2017-12-13 17:46:30
【问题描述】：

我正在尝试在 Angular 1 站点上运行脚本，我的脚本在 DOM 中查找更改以运行函数。然而，由于它是一个单页应用程序，我首选的突变目标节点可以被销毁和替换，这会阻止突变观察者工作，因为它的目标不再存在。我觉得定位其中一个父节点有点混乱，因为它将拾取数百个突变并寻找我喜欢的一个。

我可以使用任何更好的方法吗？

【问题讨论】：

您可以在创建替换元素时附加MutationObserver并将其附加到document。
使用这种方法你会有一大堆过时的突变观察者，对吧？你还需要清理旧的吗？

标签： javascript angularjs mutation-observers

【解决方案1】：

应该只需要创建一个MutationObserver 实例。在从document 中删除元素之前调用observer.disconnect()。

当新元素附加到 document 时，使用目标元素和原始配置调用原始 MutationObserver 实例的 .observe() 方法。

const el = "div";

let i = 0;

let n = 0;

function create() {

  let div = document.createElement(el);
  div.textContent = el + " " + ++i;
  div.contentEditable = true;
  document.body.appendChild(div);
  return div
}

let div = create();

function handleMutation(mutation) {
  console.log(mutation.type);
  if (++n === 3) {
    n = 0;
    observer.disconnect();
    div.parentElement.removeChild(div);
    div = create();
    // use same `MutationObserver` instance for new `<div>` element
    observer.observe(div, config);
  };
}

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(handleMutation);
});

const config = {
  childList: true,
  subtree: true,
  characterData: true
};

observer.observe(div, config);

【讨论】：

好的，谢谢，很高兴知道它可以这样工作。我仍然遇到麻烦，因为我无法控制删除或添加的元素，这一切都是由 Angular 应用程序完成的。除了观看父元素之外，如果您有任何其他想法，请告诉我。同时，我会将这个答案标记为在我原来的问题范围内。