JavaScript:getElementById 检索到相同的元素，但是.. 不同吗？

Question

我真的希望我在这里遗漏了一些明显的东西。这是 Chrome 控制台的屏幕截图，死在我面前(好吧，其他标签):

e 是由我从控制台通过 .getElementById("overlayidentifier") 检索到的。另一个变量由我碰巧正在使用的网站上包含的相当困惑的脚本使用。

在深入研究最初创建并使用 overlayidentifier 的脚本之前，我只想知道.. 这里发生了什么。

对 e 的任何 .style 更改都会生效 - 但是，如果 overlayidentifier.style.~ 被修改，则不会发生任何事情。

我从哪里开始？

揭秘。对于更好奇的人:

问题是页面某处孤独的 .innerHTML += 式代码段。使用 .innerHTML 会在调用它的元素内重建 DOM 结构。因此，在 .innerHTML 赋值之前获得的任何内部元素引用都将以一种令人困惑的方式失效:它们保留了大部分可以正常交互的属性，但它们不再位于 DOM 中树。 .parentNode 返回 null 证明了这一点。

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

Answer 1

您有两个 ID 为 overlayidentifier 的元素，小“>”箭头和 ... 表明您的 div 有内容，当您键入 overlayidentifier，当您键入 e

时，它们不存在

澄清一下，由于您的一个节点有“>”而另一个没有，所以您有两个不同的节点。