似乎在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标准指定的,还是特定于浏览器的问题？
注意:在stackoverflow上发布的另一个问题似乎是指同一个问题,但问题和答案都不是很明确.
当你追加时document.body.innerHTML,那相当于
document.body.innerHTML = document.body.innerHTML + "<div>blah blah</div>";
当您指定innerHTML浏览器必须重新分析并因此重新创建DOM的那部分时.div元素foo仍然有效,但它不再是文档的一部分.然后,当然,当你调用document.getElementById它时,会得到替换的新div foo.
行为DOM是特定的,因此它没有在ECMAScript标准中定义.它没有在任何当前的W3C标准中定义,因为innerHTML它最初是非标准属性,但它最终在HTML5中标准化.
解决的办法是要么调用document.getElementById来获取返回参考或使用document.createElement,<element>.appendChild等等,而不是设置innerHTML.