如何获取 MutationObserver 的已删除节点在被删除之前的旧父节点？

Question

我整理了一个示例，在动态变化的 DOM 中将叶节点着色为红色，将分支着色为蓝色。为了处理节点删除，我跟踪每个节点上的子节点

count

。当它达到零时，该节点成为叶节点。问题是我需要减少每个已删除节点的所有祖先的计数。

MutationObserver

似乎在节点已从 DOM 中删除后发出删除事件，因此它没有父节点。有什么办法我仍然可以在移除之前获得原始父级吗？

在我的应用程序中，我将过滤器应用于某些节点，并且不想通过让父节点和子节点都带有过滤器来过滤两次。我正在使用上面的方法处理动态 DOM。它也是一个浏览器扩展，需要尽可能便宜且不引人注目地处理任意内容。

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    $(mutation.addedNodes).find('*').addBack().each(function(i, node) {
      //all added nodes come through here
      if ($(node).data('count')) {
        //a child has already been processed so must be a branch
        $(node).addClass('branch');
      } else {
        //set ancestors as .branch and increment their count
        $(node).parents('div').each(function() {
          $(this).removeClass('leaf').addClass('branch');
          $(this).data('count', ($(this).data('count') || 0) + 1);
        });
        
        //no children have been processed so must be a leaf
        $(this).addClass('leaf');
      }
    });
    $(mutation.removedNodes).find('*').addBack().each(function(i, node) {
      //FIXME: parentNode is null
      console.log(node, node.parentNode);
      
      //decrement ancestor counts and set as leaf if zero
      $(node).parents().each(function() {
        $(this).data('count', $(this).data('count') - 1);
        if ($(this).data('count') == 0)
          $(this).removeData('count').removeClass('branch').addClass('leaf');
      });

    });
  });
});

observer.observe(document, {
  subtree: true,
  childList: true
});

//for debugging counts
$(document).on("mouseenter", "div", function() {
  $(this).attr('title', $(this).data('count'));
});

$(document.body).append('<div>');

//add some divs
window.setTimeout(function() {
  $('div').eq(0).append('<div><div></div></div>');
  $('div').eq(0).append('<div>');
}, 500);

//remove divs
window.setTimeout(function() {
  $('div').eq(2).remove();
}, 1000);

div {
  min-height: 60px;
  border: 1px solid black;
  margin: 10px;
  background-color: white;
}
.branch {
  background-color: #a3aff5;
}
.leaf {
  background-color: #f5a3a3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

您可以使用

MutationRecord.target 属性，例如

var id = 0;
$('div').click(function(e) {
  $(this).remove();
  e.stopPropagation();
}).attr('id', function() {
  return 'div-' + ++id
});

var observer = new MutationObserver(function(mutations) {

  mutations.forEach(function(mutation) {
    if (mutation.removedNodes.length) {
      console.log('mutation', mutation, mutation.target.id);
      snippet.log('deleted from node: ' + mutation.target.tagName + '[' + (mutation.target.id || '') + ']')
    }
  });

});

observer.observe(document, {
  subtree: true,
  childList: true
});

div {
  padding: 10px;
  border: 1px solid grey;
  margin-bottom: 5px;
}
div:last-child {
  margin-bottom: 0;
}

<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="ct">
  <div></div>
  <div></div>
  <div></div>
  <div>
    <div></div>
    <div></div>
  </div>
</section>