我试图使用突变处理器检测特定元素的变化，但它不起作用。我在做什么错？

Question

我一直在尝试从HTML文档记录更新的成本信息，但还没有成功。我确信必须是我无法正确使用突变观察者。 JS文件已链接。以下是我针对的HTML元素。

html：

＆lt; span ID =“ cost”＆gt; 0.00＆lt;/span＆gt;

js文件包含以下代码：

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

如果 使更改的代码更改了您正在观看的文本节点，而不是破坏和替换它，则您的代码将起作用，例如：

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

实时示例：

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>

但是进行更改的代码可能正在破坏和替换子节点，因此：

total.innerText = "1.00";

要处理，您最好观看child> child -list更改total element上的更改本身：

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>

您可能需要完善该（如果仅检查targindata更改）和/或将其与您已经拥有的内容相结合（以防万一其他代码更改文字不同），但这是您所拥有的主要问题。