有誰知道 Chrome 如何監控 javascript 中 DOM 元素的更改並在 GUI 中復制它們的實現細節？

Question

這是我的理解 - 請隨時糾正。

所以你有一些 HTML，在瀏覽器中呈現。

<h1 id="header"> hi. </h1>

在 js 中，你 select 那個 html 元素並創建一個 DOM 元素，一個特殊的 JS object 代表 Z444ZDBAD5FCAED0038A 元素。

let h1 = document.querySelector("#header")

您對 JS 中的 DOM 元素進行了更改。

h1.innerText = 'NEW STUFF'

瀏覽器對此更改做出反應，並在視口中復制更改 - 據推測，它會更改源 HTML 並觸發整個文檔的重新呈現。

問題 - 具體來說，瀏覽器如何監控 DOM 元素及其屬性的變化？

任何幫助深表感謝。

Answer 1

我不知道 100% 但是，它可能只是檢測到您何時使用某些更改 DOM 的 JS，然后更新它。

例如，它可能會在您更改元素文本或其他內容后更新它。

但是，如果你想自己檢測它，你不能用 JS 來做，就像其他人說的那樣，它是用較低級別的代碼編寫的。