JavaScript:getElementById检索到的相同元素，但是。。有什么不同？

我真的希望我错过了一些明显的东西。这是Chrome控制台的屏幕截图，就在我面前（好吧，其他标签）：

e

由我从控制台通过

.getElementById（“overlayidentifier”）

检索。另一个变量由一个相当混乱的脚本使用，该脚本包含在我正在使用的站点上

在我深入到最初创建并使用

overlayidentifier

的脚本的深渊之前，我只想知道。。这是怎么回事

对

e

的任何

.style

更改都将生效-但是，如果

覆盖了Identifier.style.~

被修改，则不会发生任何事情

我从哪里开始

解谜。对于更好奇的人：

问题是页面上某个地方有一段孤独的

.innerHTML+=

-风格的代码。使用

.innerHTML

会在调用DOM结构的元素内部重新生成DOM结构。因此，在

.innerHTML

赋值之前获得的对内部元素的任何引用都将以一种令人困惑的方式失效：它们保留了大部分属性，这些属性可以正常交互，但它们不再位于DOM树中。这可以通过

.parentNode

返回

null

来证明

---

实际上，这是一种有趣的时间浪费。

您有两个id为

overlayidentifier

的元素，小“>”箭头和

…

可以证明这一点，它表明当您键入

overlayidentifier

时，您的div中包含的内容在您键入

e

时并不存在

---

为了澄清这一点，由于一个节点有“>”而另一个没有“>”，因此您有两个不同的节点。

overlayidentifier对象可能是具有

overlayidentifier

ID的DOM元素的克隆。如果克隆了它，它将至少包含相同的HTML和属性（如果是深度克隆，则可能是相同的事件处理程序和子级），但它不再表示DOM中的实际元素

---

使用

style（）进行更改

在连接到某个DOM中之前不会有任何可见的效果。我希望这会有所帮助！

当您直接在chrome控制台中键入，只需编写一个id，它将返回元素及其所有内容。但是，在您的屏幕截图中，“e”var返回一个div，该div中没有嵌套元素

当我执行相同ID的getElementById（）时，得到完全相同的响应

---

这告诉我的是，在设置e变量时，div的内容可能不存在。

表示存在嵌套元素。公开三角形通常表示当前显示的节点有子节点而不是重复节点，除非重复节点作为所示节点的子节点附加。B但是，如果不打开三角形，就无法判断。@Piers:cWalves并不是说三角形显示重复的存在。但是这两个节点是不同的，因为其中一个节点有子节点而另一个没有。@Kristian——我知道，我是说一个有孩子，而另一个没有，因此他们是不同的nodes@cwolves好的：）我不得不重读一遍才能明白其中的含义。下面是chrome控制台/开发工具的一些提示和技巧的屏幕广播