技术解析

如何监听 JS 动态添加的 DOM 对象?
0
2021-08-09 22:09:20
idczone

我在写一个油猴脚本,有一个页面会有动态生成的列表,导致在 window.onload 或者 window.addEventListener ("load" 尝试通过 document.getElementsByClassName 获取列表中的 DOM 总是 undefined 。 我猜测是这两个生命周期执行的时候,DOM 还未被加载,有什么生命周期可以让我总是能获取到这个 DOM 吗?


事件委托

如果你想在新加入的节点添加事件,就是用事件委托,如果你只是想知道新的节点进来,可以用 MutationObserver

谢谢,我去查一下你说的这些东西

动态生成元素的时候,行内绑定事件,然后把自己作为事件的参数传进去,最后去绑定的事件里面进行操作就好了。

zh.javascript.info/mutation-observer

额,JS 添加 DOM 的代码不是我写的,我是在写一个油猴脚本,所以我修改不了这里的源码绑定事件

我通过 mutation-observer 对 container 进行了 observer,感觉能这样先凑合用了

写个油猴没必要杀鸡用牛了吧,直接 setInterval 每秒 getElementsByClassName 看看是不是 undefined,是则处理并 clearInterval

不要 setInterval,可能导致卡死,宁可反复 setTimeout
而且 mutation observer 简单封装后很方便,就是 observe(selector, callback)

getSnapshotBeforeUpdate ?

我觉得以上都是没写过油猴脚本的,
建议直接用别人写好的库
https://greasyfork.org/zh-CN/scripts/5679-wait-for-elements

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服