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

Question

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

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

Answer 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);

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

Best approach for using mutationObservers on elements which get destroyed

javascript

angularjs

mutation-observers