使用MutationObserver监听价格变化时始终输出相同值的问题排查

• 你提前全局缓存了size变量：document.querySelector('.itemSize')只会匹配页面中第一个符合.itemSize选择器的DOM元素，也就是默认最小规格对应的价格元素，后续所有打印操作读取的都是这个固定元素的内容，自然不会随规格切换更新。
• MutationObserver触发时没有重新获取当前生效的价格元素：当前你观察的是整个.productItem的子树变动，但是回调逻辑没有对应读取当前选中规格的最新价格内容，始终读取初始缓存的旧元素值。

你需要每次Observer回调触发时，重新查询当前选中状态的价格元素，再读取它的内容，示例修复代码如下：

const elementToObserve = document.querySelector(".productItem");
const observer = new MutationObserver(function() {
  // 每次触发时重新获取当前选中的规格价格元素，.active为实际选中规格的标记类名，可根据你的页面实际类名修改
  const currentSize = document.querySelector('.itemSize.active') || document.querySelector('.itemSize');
  console.log(currentSize.innerHTML);
});

observer.observe(elementToObserve, {
  subtree: true,
  childList: true,
  // 如果价格是文本内容变动，建议补充characterData配置项，避免内容修改漏触发
  characterData: true
});

• 如果你的页面中只有一个.itemSize元素用来展示当前选中规格的价格，去掉.active的条件判断，直接每次重新查询.itemSize即可，不要提前全局缓存该元素。
• 补充characterData: true的观察配置，可避免价格仅为文本内容修改时出现漏触发回调的问题。

内容的提问来源于stack exchange，提问作者harryJamesJS