Javascript 获取DOM的最后节点

我正在用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
  }); 

---

当我查看日志时，我看到一个包含所有节点的数组，但当我尝试将节点放入文本区域时，只打印最后一个节点。我可以在

target

中更改变量，但这会提供目标的所有HTML，而我只需要上一次变异的HTML。如何将最后一次变异的节点放入文本区域

您正在覆盖每次迭代的值，而不是将其添加。使用添加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;

---

您正在多次覆盖

文本区域.value

，因此自然会以最后一次写入结束。@cookie monster是的，我一整天都在试图解决这个问题，但运气不佳。最后，不要使用

.forEach（）

。而是使用

.reduce（）

并将最终值分配给

文本区域

。比如：

document.querySelector（“textarea”）.value=Array.prototype.reduce.call（mutation.addedNodes，function（str，node）{return str+（node.outerHTML | | | | | | | | |)}，”）@cookie monster谢谢你会调查的