0

我正在使用 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 ？

4

1 回答 1

2

您正在覆盖每次迭代的值，而不是添加它。使用您将 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;
于 2014-09-18T12:35:01.613 回答