zoukankan      html  css  js  c++  java
  • 怎么监听页面某个 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 监听当前元素被移除
  • 相关阅读:
    命令[34]
    命令[33]
    命令[27]
    命令[38]
    命令[19]
    命令[22]
    命令[30]
    命令[37]
    命令[23]
    命令[26]
  • 原文地址:https://www.cnblogs.com/teemwu/p/13500513.html
Copyright © 2011-2022 走看看