问题标签 [mutation-observers]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 检测/监控 DOM 变化的最有效方法?
我需要一种有效的机制来检测对 DOM 的更改。最好是跨浏览器,但如果有任何不是跨浏览器的有效方法,我可以使用故障安全的跨浏览器方法来实现这些。
特别是,我需要检测会影响页面文本的更改,因此需要任何新的、已删除或修改的元素,或对内部文本 (innerHTML) 的更改。
我无法控制所做的更改(它们可能是由于包含 3rd 方 javascript 等),因此无法从这个角度进行处理 - 我需要以某种方式“监控”更改。
目前我已经实现了一个“quick'n'dirty”方法,它body.innerHTML.length
会定期检查。这当然不会检测到导致返回相同长度的更改,但在这种情况下“足够好” - 发生这种情况的可能性非常小,并且在这个项目中,无法检测到更改不会导致在丢失的数据中。
问题body.innerHTML.length
是它很贵。在快速浏览器上可能需要 1 到 5 毫秒,这会使事情陷入困境——我还要处理大量的 iframe,所有这些都加起来了。我很确定这样做的代价是因为 innerHTML 文本不是由浏览器静态存储的,并且每次读取时都需要从 DOM 中计算出来。
我正在寻找的答案类型是从“精确”(例如事件)到“足够好”的任何类型 - 可能像 innerHTML.length 方法一样“快速'n'dirty”,但执行速度更快。
编辑:我还应该指出,虽然检测已修改的精确元素会“很好”,但这并不是绝对必要的——只要有任何变化就足够了。希望这能扩大人们的反应。我将研究 Mutation Events,但我仍然需要 IE 支持的后备,所以任何古怪的、有创意的、不合常规的想法都会受到欢迎。
javascript - 检测 DOM 中的变化
当一些 div 或输入添加到 html 时,我想执行一个函数。这可能吗?
例如,添加了一个文本输入,然后应该调用该函数。
javascript - 当元素添加到页面时如何通知我?
我希望在将 DOM 元素添加到页面时运行我选择的功能。这是在浏览器扩展的上下文中,因此网页独立于我运行,我无法修改其源代码。我在这里有什么选择?
我想,从理论上讲,我可以用它setInterval()
来不断搜索元素的存在并在元素存在时执行我的操作,但我需要一个更好的方法。
javascript - DOMSubtreeModified 在 chrome 中不起作用
我有这段代码在 Firefox 中完美运行。
但它不适用于 Chrome。我希望每次 myDiv 发生某些事情时触发一个事件。(删除,css修改,一切)。
任何变通办法?
jquery - 检查异常dom修改
我们如何区分正常的 DOM 修改(由网页本身)和异常的 DOM 修改(由攻击者)?
我在javascript的突变事件中找不到办法。可能吗?
javascript - 选择框属性更改时未触发 Webkit Mutation Observer 回调
我正在尝试使用新的Mutation Observer功能监视对选择框(或嵌套option
元素)的更改。但是,只有“setAttribute”会为我触发突变观察者的回调。
这是我正在使用的代码:
这是这段代码在运行 http://jsfiddle.net/gryzzly/wqHn5/
我想对属性的更改(selected
on<option>
或value
on <select>
)做出反应,任何关于为什么观察者不做出反应的建议都非常受欢迎!
我正在 Mac OS X 上的 Chrome 18.0.1025.168 中对此进行测试。生产代码当然也有moz
构造函数的前缀和无前缀版本,这是测试代码。
UPD。
也在 Firefox Nightly 中测试了代码,它的行为方式与 Chrome 以及 Chrome Canary 中的行为相同。我已经为两种浏览器填充了错误:
- https://bugzilla.mozilla.org/show_bug.cgi?id=757077
- https://code.google.com/p/chromium/issues/detail?id=128991
如果您也觉得这个问题很烦人,请对这些错误发表评论并投票。
webkit - 突变观察者---子树
我正在阅读此http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/1622.html似乎 Chrome 的行为与规范形成对比。如果我正确理解规范,为元素定义“子树”意味着应该报告对该元素的子树(包括元素本身)的更改。但是,在执行这段代码时,我什么也得不到。
我错过了什么?有人可以详细说明一下吗?谢谢!
firefox - 需要澄清 MutationObserver API
W3C 正在提议 MutationObserver API 来替换 Mutation Event API。更多信息在这里:http ://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers 。
我有一个关于新 API 的新手问题
- 在 MutationRecord 中,previousSibling 和 nextSibling 的目的是什么?如果有多个addedNodes 和removedNodes,它们指向哪里?
- 如果有多个添加节点和删除节点,如何确定它们发生的顺序?
- 同一个节点可以在addedNodes 和removedNodes 中,例如一个节点被添加并立即删除?如果是,同一节点是否可以在任何类别中多次出现,例如节点被添加、删除并再次添加?如果是,则上面的#2 问题变得更相关。
仅供参考,这些 API 刚刚出现在 Firefox 和 Webkit nightly build(除了出现在 Chrome 中)。
谢谢, 苏尼尔
javascript - DOM Mutation Observers 的跨浏览器支持情况如何?
我用谷歌搜索但找不到答案。
此功能是否有可用的跨浏览器兼容性矩阵?
如果有人想知道答案,这里是:Mutation Observers vs Mutation Events/Browser Availability。
javascript - Chrome 中的 Mutation Obervers 未检测到属性和 css 更改
我在 Chrome 19 中,我创建了一个新的变异观察者对象:
然后我观察到:
似乎只有在我插入或删除节点或更改节点的文本时才会触发此设置。如果我更改元素的属性或内联 css 样式,它不会被触发。为什么是这样?