觀察對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。