在 Javascript 中，如果您引用了某个 DOM 元素，然后通过向 document.body 添加其他元素来修改 DOM，您的 DOM 引用就会失效。
考虑以下代码:
<html>
<head>
<script type = "text/javascript">
function work()
{
var foo = document.getElementById("foo");
alert(foo == document.getElementById("foo"));
document.body.innerHTML += "<div>blah blah</div>";
alert(foo == document.getElementById("foo"));
}
</script>
</head>
<body>
<div id = "foo" onclick='work()'>Foo</div>
</body>
</html>
当您单击 DIV 时，系统会提示“true”，然后提示“false”。所以换句话来说，修改document.body后，对DIV元素的引用不再有效。此行为在 Firefox 和 MSIE 上是相同的。
一些问题:
为什么会出现这种情况？ 此行为是 ECMAScript 标准指定的，还是浏览器特定的问题？
注意:有another question发布在 stackoverflow 上似乎指的是同一个问题，但问题和答案都不是很清楚。
最佳答案
当您附加到 document.body.innerHTML 时，这相当于
document.body.innerHTML = document.body.innerHTML + "<div>blah blah</div>";
当您分配给 innerHTML 时就像浏览器必须重新解析并重新创建 DOM 的该部分一样。 foo 中的 div 元素仍然有效，但它不再是文档的一部分。然后，当然，当你调用document.getElementById时它得到替换 foo 的新 div .
该行为是 DOM 特定的，因此 ECMAScript 标准中未定义它。它没有在任何当前的 W3C 标准中定义，因为 innerHTML原本是一个非标准属性，但最终在 HTML5 中被标准化。
解决方案是调用 document.getElementById要取回引用，或使用 document.createElement , <element>.appendChild等，而不是设置 innerHTML .
关于JavaScript: "Dangling"引用 DOM 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2748281/