javascript - 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 返回 <p> removedNodes 对象中的节点。同样，当我删除一个 <p> 时，我在removedNodes对象中得到一个额外的元素。有没有其他方法可以准确地删除节点。我尝试在添加<p>时将removeNode与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>

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

在添加节点之后调用突变观察器，以及在删除节点之后调用突变观察器。

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

我正在使用内置的 forEach 来存储突变数组以及添加或删除节点的数组。不需要使用lodash。而且运行速度更快。

此外，document.body 是执行 jQuery('body').get(0) 的普通 JS 方式，并且运行速度更快。