Question

我目前正在学习Javascript，其中一章是“Mutation Observer”。我正在尝试创建一个简单的函数，它检测是否有新的div添加到页面并在控制台中显示它。但是，我收到此消息，我很难找到解决方法如何解决此错误。如果有人能向我解释我做错了什么，我将非常感激。提前谢谢！

Uncaught TypeError：无法在'MutationObserver'上执行'observe'：参数1不是'Node'类型。

到目前为止，这是我写的代码：

let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
   if let data = data {
      DispatchQueue.main.async { // Correct
         self.label.text = "\(data.count) bytes downloaded"
      }
   }
}
task.resume()

document.getElementById("Button").onclick = function(){
  var Add = document.createElement('div');
    Add.setAttribute("class", "Alpha");
    Add.appendChild(document.createTextNode("Test"));
    document.getElementById('Frame').appendChild(Add);
};

var Divs = document.querySelectorAll("div");
var Observer = new MutationObserver(function(mutations){
  mutations.forEach(function(mutation){
    for(var i = 0; i <= mutation.addedNodes.length; i++){
      if(!(mutation.addedNodes[i] == null)){
        console.log(mutation.addedNodes[i].innerHTML);
      }
    }
  });
});
Observer.observe(Divs, {childList: true, subtree:true});

.Alpha{
  color:red;
}

Answer 1

错误消息中解释了该问题。 observe函数需要Node，但您要分配querySelectorAll查找的返回值，该值实际返回NodeList（因此一个或多个节点）。即使它什么都没找到，它也会返回一个空NodeList但仍然无效。

在您的实例中，您似乎正在将项目推送到ID为Frame的DIV中，因此我们会将MutationObserver附加到其上并注意其子项的任何更改。最后，我们将任何已更改的节点推送到一个数组和控制台记录内容，以便您可以看到它正在捕获的内容，

var target = document.getElementById('Frame');
var insertedNodes = [];
var Observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        for(var i = 0; i < mutation.addedNodes.length; i++) {
            insertedNodes.push(mutation.addedNodes[i]);
        }
    });
});

Observer.observe(target, {
    childList: true,
    subtree:true
});

console.log(insertedNodes);

MutationObserver和querySelectorAll

1 个答案: