我正在尝试使用 MutationObserver 检测特定元素的更改，但它不起作用。 我究竟做错了什么？

Question

I have been trying to log the updated cost information from an HTML document but have not been successful. I am sure it has to be that I am not using the mutation observer correctly. The js file is linked. Below is the HTML element that I am targeting.

HTML:

<span id="cost">0.00</span>

The JS file contains the following code:

const total = document.getElementById('cost');

console.log(total);
const options = {
  characterData: true
};

function logCallback(mutations) {
  console.log('called');

  for (let mutation of mutations) {
    if (mutation.type === 'characterData')
    {
      console.log('Mutation Detected: Price changed');
    }
  }
}

const observer = new MutationObserver(logCallback);

observer.observe(total.childNodes[0], options);

Answer 1

Your code would work if the code that was making the change changed the text node you're watching rather than destroying and replacing it, like this:

total.childNodes[0].nodeValue = "1.00";

Live Example:

 const total = document.getElementById('cost'); const options = { characterData: true, }; function logCallback(mutations) { console.log('called'); for (let mutation of mutations) { if (mutation.type === 'characterData') { console.log('Mutation Detected: Price changed'); } } } const observer = new MutationObserver(logCallback); observer.observe(total.childNodes[0], options); // Code that changes the element total.childNodes[0].nodeValue = "1.00";

 <span id="cost">0.00</span>

But the code making the change is probably destroying and replacing the child node, like this:

total.innerText = "1.00";

To handle that, you're probably best off watching for childList changes on the total element itself:

 const total = document.getElementById('cost'); const options = { childList: true, }; function logCallback(mutations) { console.log('called'); for (let mutation of mutations) { console.log('Mutation Detected: Price changed'); } } const observer = new MutationObserver(logCallback); observer.observe(total, options); // Code that changes the element total.innerText = "1.00";

 <span id="cost">0.00</span>

You may need to refine that (I removed the if checking only for characterData changes), and/or combine it with what you already had (in case some other code changes the text differently), but that's the main issue with what you had.