观察对DOM属性的更改

Question

我想知道任意对象的某些属性何时更改。

我看了这个问题的答案：“extend setter default object”似乎提出了使用getters和setters的解决方案。但是，我试图用它来捕获对DOM对象的id和style属性的更改，但它不起作用。我观察到的一件奇怪的事情是，只要我为id字段创建了setter，原始的id字段就会消失，因此尝试读取或写入该值失败。由于该属性可能是一个DOM属性，它有时不是简单的变量，所以我不能简单地创建自己的变量，因为我不能随意重新创建任何正在生成值的基础功能。

我真正想要做的就是检测属性何时发生变化，并透明地传递变化。

一些进一步的研究导致我到这个页面presenting a polyfill for Object.watch。然而，虽然这种手表功能似乎让我看到物体的属性何时发生变化，但实际属性完全没有改变。

Answer 1

您可以使用mutation observers来观察属性的变化。这适用于获取/设置标记属性的DOM属性。与突变事件相比，突变观察者在实际突变后很长时间运行，而不是立即运行。我读过突变观察者比突变事件表现更好。

您还提出了在重新定义属性时如何访问原始getter/setter的问题。如果您使用突变观察器解决方案，则不需要担心这一点。在某些浏览器（如Firefox）中，像id这样的属性的原始功能也作为getter/setter实现。例如，如果您运行的是Object.getOwnPropertyDescriptor(Element.prototype, 'id').set.call(myElement, 'asdf')，那么它就像myElement.id = 'asdf'，即使myElement.id被重新定义。有些浏览器不这样做。例如，Chromium在执行Web IDL的this aspect时是still working。