MutationObserver监听HTMLCollection新增元素不触发回调问题

代码无法捕获DOM新增元素的核心问题有两个：

• 监听覆盖范围不全：你把observer绑定逻辑放在2秒延迟的setTimeout里执行，只给代码执行当下已经存在的class为XEazBc adnwBd的元素绑定了监听，后续页面动态生成的同类型元素从来没被绑定过监听，自然不会触发回调。
• 遍历逻辑存在漏洞：getElementsByClassName返回的是实时更新的HTMLCollection集合，但你提前把执行瞬间的集合长度存到了length变量中，后续集合新增的元素不会被重新遍历绑定，哪怕你延长setTimeout的等待时间，只要元素是绑定动作完成后插入DOM的，都会被漏掉。

不需要等目标元素加载完成后逐个绑定监听，直接给页面加载时就固定存在的高层级父节点绑定observer即可，最通用的选择是直接监听document.body，开启subtree配置后就能捕获整个DOM树下的所有变动，性能开销极低，也不会漏掉任何后续动态生成的元素。

修正后的可运行代码：

// 初始化observer不需要加setTimeout延迟，页面运行早期就可以绑定
const observer = new MutationObserver(mutations => {
    console.log("change observed!!!")
    console.log(mutations)
    const seconds = new Date().getTime() / 1000
    console.log(seconds)
    dict["Paul Yang"] = seconds
})

// 监听固定存在的body节点，覆盖所有子树的变动
observer.observe(document.body, {
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true,
})

如果觉得全局监听触发太频繁，可以在observer回调里加一层判断，过滤出和XEazBc adnwBd元素相关的变动后再执行业务逻辑即可。

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