Question

我正在使用DOM变异观察器监听DOM变化，如下所示：

var container = document.querySelectorAll("body")[0];

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      var target = mutation.target;
      switch (mutation.type) {

        case "childList":
          Array.prototype.forEach.call(mutation.addedNodes, function(node) {
            var lastname = node.outerHTML;
            if(typeof lastname !== "undefined")
            {


             console.log(node.outerHTML);
             //this is logging nodes as array

             var textarea = document.querySelectorAll("textarea")[0];
             textarea.value =  node.outerHTML;
             //this only gives me the very last node



            }
          });


        break;
      }
    });
  });
  observer.observe(container, {
    childList : true,
    attributes : true,
    characterData : true,
    subtree : true,
    attributeOldValue : true,
    characterDataOldValue : true
  });

当我查看日志时，我看到一个包含所有节点的数组，但是当我尝试将节点放在textarea中时，只打印最后一个节点。我可以在target中更改变量但是这给了我目标的所有HTML，而我只需要最后一个变异的HTML。如何将最后一个突变的节点放入textarea？

Answer 1

您将覆盖每次迭代的值，而不是添加它。使用添加outerHTML的变量，然后在迭代完成后设置textarea值。

var val = '';

Array.prototype.forEach.call(mutation.addedNodes, function(node) {
    var lastname = node.outerHTML;
    if(typeof lastname !== "undefined") {

         val += lastname;

    }
});

document.querySelector("textarea").value = val;

获取DOM突变的最后一个节点

1 个答案: