我目前正在学习 Javascript,我的章节之一是“Mutation Observer”。我正在尝试创建一个简单的函数来检测是否将新的 div 添加到页面并将其显示在控制台中。但是,我收到此消息,并且我很难找到解决此错误的解决方案。如果有人能向我解释我做错了什么,我将非常感激。预先感谢您!
Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
到目前为止,这是我编写的代码:
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;
}
<button id="Button">Generate a new div</button>
<div id="Frame"></div>
最佳答案
错误消息中对此问题进行了说明。 observe
函数需要 Node但您分配的 querySelectorAll
查找的返回值实际上返回 NodeList (所以一个或多个节点)。即使什么也没找到,它也会返回一个空的 NodeList
并且仍然无效。
在您的实例中,您似乎正在将项目推送到 id 为 Frame
的 DIV 中,因此我们将把 MutationObserver
附加到该 DIV 上,并观察任何更改它的 child 。最后,我们将把所有更改的节点推送到数组中,并通过控制台记录内容,以便您可以看到它捕获的内容,
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);
关于javascript - MutationObserver 和 querySelectorAll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44944828/