有谁知道 Chrome 如何监控 JavaScript 中 DOM 元素的更改并在 GUI 中复制它们的实现细节？

问题描述

这是我的理解 - 请随时纠正。

所以你有一些 HTML，在浏览器中呈现。

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

在 js 中，你选择那个 html 元素并创建一个 DOM 元素，一个代表 HTML 元素的特殊 JS 对象。

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

您对 JS 中的 DOM 元素进行了更改。

h1.innerText = 'NEW STUFF'

浏览器对此更改做出反应，并在视口中复制更改 - 大概是，它更改了源 HTML 并触发了整个文档的重新呈现。

问题 - 具体来说，浏览器如何监控 DOM 元素及其属性的变化？

非常感谢任何帮助。

解决方法

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

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

但是，如果你想自己检测它，你不能用 JS 来做，就像别人说的，它是用低级代码编写的。