为什么 getElementById 应用到同一个 id 用 innerHTML 修改其父对象后返回不同的对象？答案

【问题标题】：Why does getElementById applied to the same id returns a different object after modifying its parent with innerHTML?为什么 getElementById 应用到同一个 id 用 innerHTML 修改其父对象后返回不同的对象？
【发布时间】：2014-02-12 16:54:44
【问题描述】：

我刚刚注意到 document.getElementById("one_id") 在使用其 innerHTML 属性修改其父对象之前和之后返回不同的对象。

这发生在我测试过的每一个浏览器中。这是为什么？是什么原因？

这是一个示例，您可以自己测试和查看：

<html>
<head>
    <title>Test</title>
    <script>
        function test()
        {
            var myDiv = document.createElement("div");
            myDiv.id = "myDivID";

            var bodyTag = document.getElementsByTagName("body")[0];
            bodyTag.appendChild(myDiv);

            var myDivIDBeforeAdding = document.getElementById("myDivID");
            bodyTag.innerHTML += "something added";
            var myDivIDAfterAdding = document.getElementById("myDivID");

            if (myDivIDBeforeAdding != myDivIDAfterAdding) //This is always true!
            {
                bodyTag.innerHTML += "<br />myDivIDBeforeAdding = " + myDivIDBeforeAdding;
                bodyTag.innerHTML += "<br />myDivIDAfterAdding = " + myDivIDAfterAdding;
                bodyTag.innerHTML += "<br />myDivIDBeforeAdding and myDivIDAfterAdding are different!!!";
            }
        }
    </script>
</head>
<body onLoad="test();">
</body>

提前谢谢你。

干杯，

琼

【问题讨论】：

你有什么不同，我查了一下，大部分都是sasme...
注意 if 子句。每次都是如此，所以这意味着每个变量中存储的对象都是不同的。

标签： javascript html dom innerhtml getelementbyid

【解决方案1】：

这是因为浏览器实现innerHTML 的方式。一个简单的实现会解析传入的值，使用它作为蓝图构建一个新的 DOM 片段，然后删除（从 DOM 中分离）bodyTag 的旧子级并附加新片段。这实际上是MDN says 的主题：

删除所有元素的子元素，解析内容字符串并将结果节点分配为元素的子节点。

在这种情况下，检查“之前”和“之后”DOM 节点会告诉您它们是同卵双胞胎。

【讨论】：

感谢您的回答。在我的真实项目中，我想要做的是避免使用太多的 document.getElementById() 调用。所以我的想法是只调用一次并将其存储在一个变量中，以便在我的脚本中使用它。但是这种方法似乎不起作用，因为在通过 innerHTML 修改其父对象后，该变量不再指向同一个对象。请问您对此有什么建议吗？（恐怕每次在父级中使用 innerHTML 时，我都必须结束更新该变量）。
你为什么害怕？除非您的页面运行缓慢并且您已将问题追溯到 getElementById 开销（纯粹假设的场景），否则您为什么要一心避免它？
这是因为我正在开发一个 Javascript 游戏引擎，并且我尽可能地优化代码。
@jalbam：这是一个崇高的目标，但是手动进行某些操作而不是使用innerHTML 可能会更快。在任何情况下，您都应该在获得具体的基准测试结果后进行优化。