javascript - 浏览器如何从innerHTML属性更新DOM？

Question

我试图弄清楚当 javascript 更改 Node.innerHTML 属性时，浏览器如何执行 DOM 更新工作。

给定代码:

> var obj=document.createElement("DIV");
> obj.innerHTML='<P><SPAN>A</SPAN></P><DIV>B</DIV>';
> obj.childNodes
[<p>​<span>​A​</span>​</p>​, <div>​B​</div>​]

这对我来说似乎很神奇，因为我认为innerHTML是一个属性，而不是一个函数，所以...

如何通知 javascript 字段中的更改以调用函数来更新 DOM 树？

当 javascript 中的变量发生更改时，是否有任何类型的监听器用于调用函数，或者只有某些守护进程在执行的每个 javascript 行上监视 Node.innerHTML 变量？

如果您想知道为什么它很重要，我正在编写一个 DOMParser，这对我来说是一个问题。

根据给定的引用资料，我了解到浏览器引擎可能提供类似 Object.watch (gecko) 或 Object.observe(chrome) 的方法。

但是在nodejs中有办法做到这一点吗？

Answer 1

since I think that innerHTML is a property, not a function

Javascript 支持 setter。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set

在这成为语言标准的一部分之前， native 对象(例如 DOM 节点)已经在内部使用了 setter 功能。