Question

我有一个我正在使用的MutationObserver -

var config = {
  attributes: false,
  childList: true,
  characterData: false,
  subtree: true
};

var observer = new MutationObserver(function(mutations) {
  //need to call function1() only when nodes are ADDED, not removed
});

var startObserving = function () {
  target = document.getElementsByClassName("message-container")[0];
  observer.observe(target, config);
}

我需要在MutationObserver正在观看的容器中添加和删除元素，但我只想在添加节点时执行function1()。有没有办法做到这一点？我一直在阅读MDN文章，但无法想到这样做的方法。任何帮助将不胜感激！

Answer 1

您应该能够检查每个addedNodes对象上的mutations属性，以确定是否添加了元素。您可能还想验证type是childList。

查看MDN上的MutationRecord页面。

像

这样的东西

var observer = new MutationObserver(function(mutations) {
  var hasUpdates = false;

  for (var index = 0; index < mutations.length; index++) {
    var mutation = mutations[index];

    if (mutation.type === 'childList' && mutation.addedNodes.length) { 
      hasUpdates = true;

      break;
    }
  }

  if (hasUpdates) {
    function1();
  }
});

MutationObserver - 仅在添加节点时执行某些操作，而不是删除

1 个答案: