MutationObserver 仅移除节点

Question

我正在尝试从可以有 0 - n 个副本并且可以动态添加的页面中获取特定的已删除元素属性。我开始使用 DOMNodeRemoved 事件，然后得知这是不推荐使用的，然后转向 MutationObserver。这是下面的代码示例 -

var deletionObserver = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    if (mutation.removedNodes.length > 0) {
      var $target = jQuery(mutation.removedNodes);
      lodash.forEach($target.find("Node"), function (value) {
..............

//Call
deletionObserver.observe(jQuery('body').get(0), {childList: true, subtree: true})

问题 - 我通过 removedNodes 对象获取了太多节点，例如，当我向页面添加 <p> 元素时，mutationObserver 在 removedNodes 对象中返回一个 <p> 节点。同样，当我删除一个<p> 时，我在removedNodes 对象中得到了一个额外的元素。有没有其他方法可以完全删除节点。我尝试在添加 <p> 元素时将 removedNode 与 jQuery("body") 进行比较。有点像 -

if(jQuery("body").find($target).length > 0)

这不起作用，我总是得到零。任何建议都会对您有所帮助。

Answer 1

试试这个：

var deletionObserver = new MutationObserver(
  function (mutations) {
    mutations.forEach(
      function (mutation) {
        mutation.addedNodes.forEach(
          function(node) {
            console.log('The added node', node);
          }
        );
        mutation.removedNodes.forEach(
          function(node) {
            console.log('The removed node', node);
          }
        );
      }
    );
  }
);

var container = document.querySelector('.container');
console.clear();

deletionObserver.observe(container, {
  childList: true,
  subtree: true
});

setTimeout(function() {
  var temp = document.createElement('p');
  temp.textContent = "I am a `p` tag";
  container.appendChild(temp);
  setTimeout(function() {
    temp.remove();
  }, 1000);
}, 1000);

<div class="container"></div>

我正在观察添加节点和删除节点的时间。

Mutation Observer 被称为在一个节点被添加和在一个节点如果被删除。

但它为您提供了添加和删除的节点。因此，无需查找它们。

我将内置的forEach 用于突变数组以及添加或删除节点的数组。无需使用 lodash。而且运行速度更快。

document.body 也是 jQuery('body').get(0) 的香草 JS 方式，它运行得更快。