document.write到底做了什么？

蓝色_冰点 2011-11-01 09:31:49

问题似乎很简单，但请看一下下面的代码

<html>

<head>

    <title></title>

    <script language="javascript" type="text/javascript">

        var div=document.createElement("div");

        div.innerHTML="被添加的div";

        //如果直接document.body.appendChild(div); 则失败.

        

        //document.write("<span></span>");  //添加这行，document.body.appendChild(div) 成功.

        //document.write(" ");         //document.body.appendChild(div); IE下成功，FF,Chrome失败.

        //document.write(" ");              //document.body.appendChild(div); 失败.

        

        document.body.appendChild(div);

    </script>

</head>

<body></body>

</html>

谁告诉我其中原因？

...全文

3445 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

Legend1988 2011-11-02

打赏
举报

学习了。谢谢liangws。关于document.write这个http://www.w3cool.com/2008/08/14/documentwrite.html也写得不错~

ebonyzhang 2011-11-02

打赏
举报

有收获!
谢谢楼主!
谢谢9楼!

无涯自成一方 2011-11-02

打赏
举报

[Quote=引用 9 楼 liangws 的回复:]
引用 8 楼 sharp_ice 的回复:

引用 7 楼 liangws 的回复:
引用 4 楼 sharp_ice 的回复:

我知道把script放在body下会成功
但我提这个问题的目的在于想知道document.write做了什么动作，从而对document.body产生影响

我比较好奇的是，放在body前面，第一句话都报错了，怎么会执行下去？

document.……
[/Quote]

Good!!
我以前从没有这么深入了解,只知道可以这么用.今天看了你的回帖,才知道怎么回事.
不错大有收获吖

liangws 2011-11-01

打赏
举报

[Quote=引用 8 楼 sharp_ice 的回复:]

引用 7 楼 liangws 的回复:
引用 4 楼 sharp_ice 的回复:

我知道把script放在body下会成功
但我提这个问题的目的在于想知道document.write做了什么动作，从而对document.body产生影响

我比较好奇的是，放在body前面，第一句话都报错了，怎么会执行下去？

document.write("可显示的文字内容");
doc……
[/Quote]
我理解是这样
document是引擎开始解析代码前就初始化，放到作用域，推到作用域链的末端，不过这时作用域链是空的，所以document是处于顶端，也就是我们所说的全局变量
初始化工作类似 var document = new Document();
而Document是拥有body,getElementById,getElementsByName,write等方法的类
所以document就拥有了Document的原型方法与其成员变量，但getElementById这些是基于body已经加载完成才能使用，这就是为什么当页面没加载完成时，我们使用不了getElementById的原因，而write并不需要，所以我们可以在页面还没加载完之前调用document.write方法
并且我们也知道write方法作用是楼上说的“指的是当前文档对象输出”，
其实调用document.write方法的同时，会调用open与close的方法，具体会这么实现
document.open();
document.write();
document.close();
当open的时候将会打开一个文档流来输入内容，当文档已存在的时候，则先清空
write就是写入内容，close就是关闭文档流了
而上面的例子，当第一次使用document.write的时候，文档还没存在，所以它不会清空，而会将内容是直接附加到文档流中,当有内容附加在文档流后，body自然就会创建了，大家可以用firebug断点就清晰看到第一次document.write之前body为null,当document.write之后，body就为“body”了，所以就解析了楼主为什么document.write之后能使用document.body.appendChild
但同时提醒大家，非必要情况请不要使用document.write，因为当window.onload的时候，会将文档清空的

蓝色_冰点 2011-11-01

打赏
举报

[Quote=引用 7 楼 liangws 的回复:]
引用 4 楼 sharp_ice 的回复:

我知道把script放在body下会成功
但我提这个问题的目的在于想知道document.write做了什么动作，从而对document.body产生影响

我比较好奇的是，放在body前面，第一句话都报错了，怎么会执行下去？
[/Quote]
document.write("可显示的文字内容");
document.body.appendChild(div);
如果代码是这样的话，执行是成功的，你可以去试一下

liangws 2011-11-01

打赏
举报

[Quote=引用 4 楼 sharp_ice 的回复:]

我知道把script放在body下会成功
但我提这个问题的目的在于想知道document.write做了什么动作，从而对document.body产生影响
[/Quote]

我比较好奇的是，放在body前面，第一句话都报错了，怎么会执行下去？

蓝色_冰点 2011-11-01

打赏
举报

[Quote=引用 5 楼 wuya_01 的回复:]
document.write
指的是当前文档对象输出

上面代码的意思是:创建一个"div"元素节点
div.innerHTML="被添加的div"是指给"div"添加文本内容

document.body.appendChild(div)指的是给body添加子元素"div"
[/Quote]
这些代码所代表的意思我知道
我现在想知道的是 document.write的存在，会影响document.body.appendChild成功的原因

无涯自成一方 2011-11-01

打赏
举报

document.write
指的是当前文档对象输出

上面代码的意思是:创建一个"div"元素节点
div.innerHTML="被添加的div"是指给"div"添加文本内容

document.body.appendChild(div)指的是给body添加子元素"div"

蓝色_冰点 2011-11-01

打赏
举报

我知道把script放在body下会成功
但我提这个问题的目的在于想知道document.write做了什么动作，从而对document.body产生影响

liangws 2011-11-01

打赏
举报

你放在上面。。document都还加载完。。怎么能调用呢

liangws 2011-11-01

打赏
举报

。。。。
楼主试试
<script language="javascript" type="text/javascript">
var div=document.createElement("div");
div.innerHTML="被添加的div";
//如果直接document.body.appendChild(div); 则失败.

//document.write("<span></span>"); //添加这行，document.body.appendChild(div) 成功.
//document.write(" "); //document.body.appendChild(div); IE下成功，FF,Chrome失败.
//document.write(" "); //document.body.appendChild(div); 失败.

document.body.appendChild(div);
</script>
放到body下面看看？

蓝色_冰点 2011-11-01