以前我自己也犯过这么个错误，就是在document.write之后，发现脚本报错误。当然后来是知道了，最近看到有网友在群里提出类似的问题。我在这里就总结下document.write的用法和注意事项。
先看下面一个小网页：
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=iso-8859-1"
/>
<
title
>
Untitled Document
</
title
>
</
head
>
<
script
type
="text/javascript"
>
function
InitPage()
{
var
obj
=
document.getElementById(
"
DIV_top
"
);
//
document.write(document.getElementById("DIV_top").style.width);
//
document.write(document.getElementById("DIV_top").style.height);
document.write(obj.style.width);
document.write(obj.style.height);
}
</
script
>
<
body
onload
="InitPage();"
>
<
div
id
="DIV_top"
style
="width:400px; height:200px;"
>
This is a test !
</
div
>
</
body
>
</
html
>
这个网页执行是没有问题的。
下面请将函数当前注释去掉，最后两行加上注释，如：
var obj = document.getElementById("DIV_top");
document.write(document.getElementById("DIV_top").style.width);
document.write(document.getElementById("DIV_top").style.height);
//document.write(obj.style.width);
//document.write(obj.style.height);
执行过程发生什么情况了？ 首先结果是只输出了 400px ，如果你的调试工具够先进就看到了，明确提示document.write(document.getElementById("DIV_top").style.height); 中，document.getElementById("DIV_top"). 为null
根据上面的小测试，我想你对document.write的细节已经清楚了。
现在总结下：
document.write 产生一个文档输出流，会将先前的内容一次覆盖。 但是内存并没有释放对象，只是页面已经没有其句柄。 这个和js垃圾回收机制有关。
也许你会问，为什么第一个例子中的第二句 document.write没有将第一句的产生的内容冲掉呢？
这个。。。就好比你以流方式打开一个文件，第一次写的时候是覆盖，将文件内容都清掉。而第二次写的时候，并不需要重新打开了。
试试下面这个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function InitPage()
{
var obj = document.getElementById("DIV_top");
var temp = "add";
var str = "<input type=\"button\" onclick=\"document.write(\'可以不停的增加\');\" name=\'Test\' value=\'Test\'/>";
document.write(obj.style.width);
document.write(obj.style.height);
document.write(str);
}
</script>
<body onload="InitPage();">
<div id="DIV_top" style="width:400px; height:200px;"> This is a test !</div>
</body>
</html>
呵呵，比看枯燥的文字有意思吧。程序就是要多动手练习，实践。特别是自己有想法的时候，用代码去证明。
posted on 2008-11-25 01:41
-274°C 阅读(5402)
评论(4) 编辑 收藏 所属分类:
web前端