Mutation Observer监听data-room属性变更无响应且无报错问题咨询

问题原因 #

• Mutation Observer 默认不会监听DOM节点的属性变化，你在observe方法的配置项里仅开启了childList（监听子节点增删）和subtree（监听后代节点变更），没有开启attributes配置，所以data-room属性变更时不会触发回调。
• 额外优化建议：无需监听整个document节点，直接监听目标#container节点即可，既可以降低性能消耗，也能避免其他节点变更触发无效回调。

正确实现示例 #

<div id="container" data-room="room1">some content</div>
<button onclick="changeroom('room2');">Change</button>

<script>
const container = document.getElementById('container');

new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.attributeName === 'data-room') {
      console.log('changed room, current value：', container.dataset.room);
      // 此处编写你的业务逻辑
    }
  }
}).observe(container, {
  attributes: true, // 开启属性变更监听
  attributeFilter: ['data-room'] // 仅监听data-room属性，忽略其他属性变更，优化性能
});

// changeroom方法示例
function changeroom(newRoom) {
  container.dataset.room = newRoom;
}
</script>

如果需要获取属性变更前的旧值，可在配置中添加attributeOldValue: true，直接从mutation.oldValue字段读取旧值，无需额外声明变量存储。

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