javascript：document.wirte() 个人理解

最新推荐文章于 2022-02-22 15:09:40 发布

写代码的疯子

最新推荐文章于 2022-02-22 15:09:40 发布

阅读量728

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u010411682/article/details/76856691

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

javascript 输出内容的4种方式
1. alert(“alert内容”); 警告框
2. document.write()
3. innerHTML=”新内容”
4. console.log(“控制台打印内容”);

document.wirte()

当文档加载完成后，执行此语句，会覆盖掉整个文档的内容。
html文档加载之前，浏览器会打开自身的输出流，html文档加载的过程，就是浏览器向设备(如屏幕)输出内容的过程，当html文档加载完成后，浏览器输出流关闭。
例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        <!-- 以ie最新模式渲染当前页面 -->
        <!--  X-UA-Compatible是ie8专有meta属性-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>document.wirte()测试</title>
    </head>
    <body>
        <div class="wrap" style="text-align:center;">
            <button onclick="clicks()">千万不要点，如果点了这个页面所有内容都被覆盖掉了</button>
        </div>
        <script>
            function clicks()
            {   
                document.write("<center>让你不要点不要点，你非要点，看吧，是不是页面之前的所有内容都没了</center>");
                document.write("<center>为什么页面之前的内容没有了？</center><br/>");
                document.write("<center>答：因为页面加载完成以后，浏览器输出流随之关闭。给button添加了onclick事件，当该事件被触发时浏览器输出流重新打开(或者onclick及其他事件在onload之后执行)重新输出内容，所以之前的内容会被覆盖掉</center>");
                // 总结说明：onclick事件以及其他事件都在window.onload之后执行，可以理解为所有事件在window.onload执行过程中处于准备状态，当onclick事件发生时，也说明window.onload已经执行完成。
                //document.close();
            }
        </script>
    </body>
</html>

例2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>document.write()在页面加载完成后执行</title>
    </head>
    <body>
    <center>
     onload执行过程中的内容
    </center>
    <script>
    window.onload = function(){
        document.write("<center style='color:red;'>onload页面加载完成后执行的document.write()，此内容覆盖页面之前的内容</center>");
    }
    </script>
    </body>
</html>

例3：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        <!-- 用IE最新模式渲染当前页面 X-UA-Compatible IE8专有meta属性 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <!-- 引入bootstrap框架css文件 -->
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
    </head>
    <body>
    <center>
        这句话的后面执行了javascript的document.write()语句，但是没有覆盖当前页面内容
    </center>
    <!-- 引入bootstrap的js之前必须先引入jquery.js文件
    <script src="jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    -->
    <script>
    document.write("<center style='color:red;'>这是document.write()语句输出的内容，没有覆盖掉当前页面的内容</center>");
    document.write("<center style='color:red;'>之所以没有覆盖掉当前页面内容，是因为此语句是在页面加载过程中执行的，也就是浏览器输出流并未关闭，所以会接着页面内容继续写入</center>");
    </script>
    </body>
</html>

总结：例1、例2的document.write()语句在页面加载完成后执行，覆盖当前页面所有内容。例3在页面加载的过程中执行，浏览器输出流并未关闭，所以document.write()会接着当前页面的内容写入。

一个小问题

<button onclick="clicks()">按钮</button>
<button onClick="clicks()">按钮</button>
<script>
// 在html标签中，onClick和onclick不区分大小写，但在javascript中，onclick必须为onclick，区分大小写
</script>

遗留问题：onload和触发事件后执行的document.write()，都覆盖了页面之前的内容，onload和触发事件在document.write()的表现上有何异同？

百度网友关于document.write()的讨论）

写代码的疯子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript：document.wirte() 个人理解

javascript 输出内容的4种方式 1. alert(“alert内容”); 警告框 2. document.write() 3. innerHTML=”新内容” 4. console.log(“控制台打印内容”);document.wirte()当文档加载完成后，执行此语句，会覆盖掉整个文档的内容。 html文档加载之前，浏览器会打开自身的输出流，html文档加载的过程，就
复制链接

扫一扫