Question

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

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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

1 个答案: