關於document的三個方法:open、write、close

document.open會打開一個新文檔,清除已加載的文檔;document.write在HTML加載後調用會導致open方法調用一次;document.close會關閉打開的文檔。

直接看代碼和效果圖:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>關於write</title>
</head>
<body>
    <h1>HTML - 1</h1>

    <script>
        function doAsync(fun){
            setTimeout(fun, 3000);
        }
        //調用document.open,清除當前文檔,但是需要HTML加載完成後有效
        document.open();
        //文檔加載未完成
        //腳本阻塞HTML解析,write會向文檔流添加內容
        document.write("<h1>這裏調用open、close無效 [文檔未加載完成]</h1>");
        document.open();
        document.close();
        document.open();
        document.close();
        doAsync(()=>{
            //文檔已加載
            //調用document.write會導致document.open調用一次
            //document.open會清除前文檔並開始一個新的文檔
            document.write("<h1>文檔加載結束。調用open,清除原文檔</h1>");
            document.write("<h1>這次沒調用open,保持追加</h1>");
            //document.write方法不會導致document.close調用,需要手動調用
            //document.close之後,如果再調用document.write,會導致document.open調用一次
            document.close();

            doAsync(()=>{
                document.open();
                document.write("<h1>這裏手動調用open,原文檔被清除</h1>");
                //調用document.open會清除頁面,即便沒有close
                document.open();
                document.write("<h1>這裏手動調用open,原文檔被清除</h1>");
                document.close();
            });

        });
    </script>

    <h1>HTML - 2</h1>
</body>
</html>

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章