Javascript 使用mutationObserver不会';似乎无法跟踪DOM中不断变化的表
我正在尝试编写一个简单的chrome扩展来更改DOM中表的值。这里重要的一点是,该网页正在使用ajax命令来构建和更改该表的内容。(首先,页面中没有任何内容。然后单击链接,并发出ajax请求(无需重新加载页面)将创建一个表,然后单击其他链接,修改该表) 下面是我用来监听表更改的代码:Javascript 使用mutationObserver不会';似乎无法跟踪DOM中不断变化的表,javascript,html,mutation-observers,Javascript,Html,Mutation Observers,我正在尝试编写一个简单的chrome扩展来更改DOM中表的值。这里重要的一点是,该网页正在使用ajax命令来构建和更改该表的内容。(首先,页面中没有任何内容。然后单击链接,并发出ajax请求(无需重新加载页面)将创建一个表,然后单击其他链接,修改该表) 下面是我用来监听表更改的代码: var target = document.querySelector('#my-table'); var observer = new MutationObserver(function (mutations)
var target = document.querySelector('#my-table');
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
alert('The table has appeared');
});
});
var config = {
attributes: true,
childList: true,
characterData: true,
subtree: true
};
observer.observe(target, config);
observer.disconnect();
问题是,当我在页面中按下一个链接使表发生变化时,什么也不会发生。当我检查chrome的控制台以调试我的工作时,我发现在页面加载时它给了我这个错误:
未捕获NotFoundError:无法在上执行“观察”
“MutationObserver”:提供的节点为空
我真的迷路了,不知道该怎么办。有人有什么建议吗?
ps:这是我的扩展名清单文件:
"manifest_version": 2,
"name": "MyExtension",
"description": "Testing the Content Script api",
"version": "1.0",
"content_scripts": [
{
"matches": ["www.myWebsite.com"],
"js": ["script.js"]
}
],
"browser_action": {
"default_icon": "icon.png"
}
}
你需要在变异后重新评估选择,依次检查每个添加的元素
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if (node.id == 'my-table') { // or node.getElementsByClassName(..).length or whatever
console.log('table has appeared.');
});
});
});
});
observer.observe(document, {
childList: true,
subtree: true,
attributes: false,
characterData: false,
});
效率较低,但代码较短,您可以在每次变异后重新选择整个文档:
var observer = new MutationObserver(function() {
if (document.getElementById('my-table')) {
console.log('table has appeared.');
}
});
observer.observe(document, {
childList: true,
subtree: true,
attributes: false,
characterData: false,
});
如果您使用的是简单的ID选择器,它可能会很有效,因为按ID选择是高度优化的。好吧,它似乎根本无法解决问题。此方法在
DOM
中能够检测到的唯一更改是使用突变。childNodes
属性返回3个未定义的对象。(mutation.addedNodes
甚至不会在浏览器中触发,并在chrome控制台中给我一个未定义的类型错误)通过进一步挖掘MDN
和对您的代码进行一些更改,我成功地让它工作了。感谢您,我可以提供帮助。我即兴写下了这一点,因此可能会有问题。如果您发现我做错了什么,可以帮助下一个人,请告诉我,我会更新答案。仅供参考@Julian您在子树后缺少一个逗号(我试图编辑,但编辑必须为6个字符或更多):)