Javascript 为什么应用于同一id的getElementById在使用innerHTML修改其父对象后返回不同的对象？_Javascript_Html_Dom_Innerhtml_Getelementbyid

Javascript 为什么应用于同一id的getElementById在使用innerHTML修改其父对象后返回不同的对象？

javascript html dom

Javascript 为什么应用于同一id的getElementById在使用innerHTML修改其父对象后返回不同的对象？,javascript,html,dom,innerhtml,getelementbyid,Javascript,Html,Dom,Innerhtml,Getelementbyid,我刚刚注意到document.getElementById（“one_id”）使用其innerHTML属性在修改其父对象前后返回不同的对象这在我测试过的每个浏览器中都会发生。为什么呢？原因是什么以下是一个示例，您可以自己测试和查看： <html> <head> <title>Test</title> <script> function test() { var

我刚刚注意到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>


测验
功能测试（）
{
var myDiv=document.createElement（“div”）；
myDiv.id=“myDivID”；
var bodyTag=document.getElementsByTagName（“body”）[0]；
bodyTag.appendChild（myDiv）；
var myDivIDBeforeAdding=document.getElementById（“myDivID”）；
bodyTag.innerHTML+=“添加的内容”；
var myDivIDAfterAdding=document.getElementById（“myDivID”）；
if（myDivIDBeforeAdding！=myDivIDAfterAdding）//这总是正确的！
{
bodyTag.innerHTML+=”
myDivIDBeforeAdding=“+myDivIDBeforeAdding；
bodyTag.innerHTML+=”
myDivIDAfterAdding=“+myDivIDAfterAdding；
bodyTag.innerHTML+=“
MyDividBeforeReading和myDivIDAfterAdding是不同的！！！”；
}
}

先谢谢你

干杯

Joan

这是因为浏览器实现

innerHTML

的方式。一个简单的实现将解析传入的值，使用该值作为蓝图构建一个新的DOM片段，然后删除（从DOM中分离）bodyTag的旧子元素并附加新片段。事实上，这就是关于这个主题的内容：

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

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

这是因为浏览器实现

innerHTML

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

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

您有什么不同之处，我检查了它，大部分内容都是sasme…请注意if子句。每次都是这样，这意味着存储在每个变量中的对象是不同的。你得到了什么不同，我检查了它，大部分内容都是sasme…注意if子句。每次都是这样，这意味着存储在每个变量中的对象是不同的。谢谢你的回答。在我的实际项目中，我试图做的是避免使用过多的document.getElementById（）调用。所以我的想法是只调用它一次，并将其存储在变量中，以便在我的脚本中使用它。但是这个方法似乎不起作用，因为变量在通过innerHTML修改其父对象后不再指向同一个对象。关于这一点，你有什么建议吗？（我担心每次在父级中使用innerHTML时都必须停止更新该变量）。您为什么害怕？除非你的页面运行缓慢，并且你已经将问题追溯到开销（一个纯粹假设的场景），那么你为什么要避免它呢？这是因为我正在开发一个Javascript游戏引擎，并且我尽可能地优化代码。@jalbam：这是一个崇高的目标，但是，手动执行某些操作可能比使用

innerHTML

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

innerHTML

更快。在任何情况下，您都应该在得到具体的基准测试结果之后进行优化。