怎么監聽頁面某個 DOM 元素被修改

MutationObserver 監聽 DOM 樹的改變

MutationObserver 接口提供了監視對DOM樹所做更改的能力。它被設計為舊的Mutation Events功能的替代品，該功能是DOM3 Events規范的一部分。

將下面代碼加入到 Tampermonkey，刷新所需監聽元素頁面，查看斷點信息即可查找到對應調用方法。

new MutationObserver((mutations, observer) => {
  const el = document.querySelector("your selector")
  if (el != null) {
    observer.disconnect()
    new MutationObserver((mutations, observer) => {
      debugger
    }).observe(el, {childList: true, subtree: true})
  }
}).observe(document, {childList: true, subtree: true})

Chrome 設置斷點進行監聽

選中需要監聽 DOM 元素的父級元素，右擊選中 Break on => subtree moditfications，斷點打上后刷新頁面即可。

• subtree modifications 監聽當前元素子級元素變化
• attribute modifications 監聽當前元素屬性變化
• node removal 監聽當前元素被移除