Question

我已经把一个例子放在一起，我在一个动态变化的DOM中将叶子节点着色为红色并且分支为蓝色。要处理节点删除，我会跟踪每个节点上的子count。当它达到零时，该节点成为叶节点。问题是我需要减少每个被删除节点的所有祖先的数量。在节点从DOM中删除后，MutationObserver似乎提供了删除事件，因此它没有父节点。有什么办法我可以在删除之前获得原始父母吗？

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

＆＃13;
＆＃13;
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);
＆＃13;
div { min-height: 60px; border: 1px solid black; margin: 10px; background-color: white; } .branch { background-color: #a3aff5; } .leaf { background-color: #f5a3a3; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

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>

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

1 个答案: