MutationObserver不检测querySelectorAll()[]内部的变化

Question

我有这段代码。

New MutationObserver(() => {
const code = document.querySelectorAll('code');
const parser = JSON.parse(code[10].textContent as string);
const getData = parser.elements;
console.log(getData);
}).observe(document, {
attributes: true,
characterData: true,
childList: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true,
});

目前，MutationObserver不检测下一页中的新querySelectorAll('code')[10].textContent内容。

我需要做些什么来检测这些变化?

Answer 1

传递给MutationObserver构造函数的回调是在观察到突变时调用的，而不是被观察到的内容。

你需要调用observer上的observe函数，并配置要观察什么

// Node to observe
const targetNode = document.getElementById('#id');
//Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
.....
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);

查看这里的文档