javascript:document.wirte() 个人理解

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

document.wirte()

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


<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        
        
        <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("
让你不要点不要点,你非要点,看吧,是不是页面之前的所有内容都没了
"
); document.write("
为什么页面之前的内容没有了?

"
); document.write("
答:因为页面加载完成以后,浏览器输出流随之关闭。给button添加了onclick事件,当该事件被触发时浏览器输出流重新打开(或者onclick及其他事件在onload之后执行)重新输出内容,所以之前的内容会被覆盖掉
"
); // 总结说明:onclick事件以及其他事件都在window.onload之后执行,可以理解为所有事件在window.onload执行过程中处于准备状态,当onclick事件发生时,也说明window.onload已经执行完成。 //document.close(); }
script> body> html>

例2:


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

例3:


<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
    head>
    <body>
    <center>
        这句话的后面执行了javascript的document.write()语句,但是没有覆盖当前页面内容
    center>
    
    <script>
    document.write("
这是document.write()语句输出的内容,没有覆盖掉当前页面的内容
"
); document.write("
之所以没有覆盖掉当前页面内容,是因为此语句是在页面加载过程中执行的,也就是浏览器输出流并未关闭,所以会接着页面内容继续写入
"
);
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()的表现上有何异同?

javascript:document.wirte() 个人理解_第1张图片

你可能感兴趣的:(javascript)