如何监听 JS 动态添加的 DOM 对象?

2021-06-09 11:21:44 +08:00
 pdog18

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

2676 次点击
所在节点    JavaScript
11 条回复
Rache1
2021-06-09 11:23:30 +08:00
事件委托
Rache1
2021-06-09 11:24:56 +08:00
@faqqcn 如果你想在新加入的节点添加事件,就是用事件委托,如果你只是想知道新的节点进来,可以用 MutationObserver
pdog18
2021-06-09 11:25:40 +08:00
谢谢,我去查一下你说的这些东西
xu2060
2021-06-09 11:26:13 +08:00
动态生成元素的时候,行内绑定事件,然后把自己作为事件的参数传进去,最后去绑定的事件里面进行操作就好了。
newmlp
2021-06-09 11:32:25 +08:00
pdog18
2021-06-09 11:37:20 +08:00
@xu2060 额,JS 添加 DOM 的代码不是我写的,我是在写一个油猴脚本,所以我修改不了这里的源码绑定事件
pdog18
2021-06-09 11:39:18 +08:00
我通过 mutation-observer 对 container 进行了 observer,感觉能这样先凑合用了
love
2021-06-09 11:39:38 +08:00
写个油猴没必要杀鸡用牛了吧,直接 setInterval 每秒 getElementsByClassName 看看是不是 undefined,是则处理并 clearInterval
no1xsyzy
2021-06-09 12:51:12 +08:00
@love 不要 setInterval,可能导致卡死,宁可反复 setTimeout
而且 mutation observer 简单封装后很方便,就是 observe(selector, callback)
Baymaxbowen
2021-06-09 12:54:03 +08:00
getSnapshotBeforeUpdate ?
Rhilip
2021-06-10 16:16:30 +08:00
我觉得以上都是没写过油猴脚本的,
建议直接用别人写好的库
https://greasyfork.org/zh-CN/scripts/5679-wait-for-elements

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/782350

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX