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

试试这个：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

在添加节点之后，在节点之后调用

但是它为您提供了添加和删除的节点。所以没有必要查找它们。

我使用内置的forEach来获取突变数组以及添加或删除的节点数组。不需要使用lodash。它运行得更快。

此外document.body是一种真正的JS jQuery('body').get(0)方式，运行速度更快。

MutationObserver仅删除了节点

1 个答案: