有谁知道 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 来做，就像其他人说的那样，它是用较低级别的代码编写的。