改变DOM并没有反映在文档的innerHTML中

Question

我有以下一行JavaScript代码：

divElement.childNodes[x].style[s] = rule.style[s];

在执行此行之前

divElement.childNodes[x].outerHTML

看起来像：

"<SPAN id=sp_100 class=FolderNode>Root Folder</SPAN>"

和

document.getElementById("sp_100").outerHTML

看起来像：

"<SPAN id=sp_100 class=FolderNode>Root Folder</SPAN>"

即。他们匹配。

执行该行代码后，我看到：

divElement.childNodes[x].outerHTML

看起来像：

"<SPAN id=sp_100 class=FolderNode style=\"FONT-SIZE: 11px\">Root Folder</SPAN>"

和

document.getElementById("sp_100").outerHTML

看起来像：

"<SPAN id=sp_100 class=FolderNode>Root Folder</SPAN>"

知道html是如何更新的吗？

当我逐步浏览相同代码的旧版本时，我发现它已更新。旧版本使用Synchronous JavaScript调用构建，新版本使用异步调用构建。

-Eric

Answer 1

如果您可以访问元素的ID，我建议您始终使用getElementById函数获取对象的引用。您也可以通过直接使用其ID来使用对象的引用（我不确定它是否在所有浏览器上都受支持）。

示例：

obj = document.getElementById("Obj_id")
obj.style = "..."

与：

相同

Obj_id.style = "..."