document.write详细说明

最新推荐文章于 2022-05-07 20:55:56 发布
原创 最新推荐文章于 2022-05-07 20:55:56 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#文档 #脚本 #浏览器

本文详细解释了document.write()函数的工作原理及其潜在的问题，包括在不同场景下如何正确使用该函数，尤其是在事件处理程序中避免覆盖现有文档内容的方法。

document.write()用来向文档输出,函数很简单但是有时候也会出现使用错误，例如在事件中输出，它会覆盖当前文档输出内容。原因是：document.write只能在文档解析过程中输出，倘若在文档完全载入则覆盖当前文档和它所包含的脚本。

所以对于<script defer></script>来说会就会产生该种情况，因为defer告诉浏览器，将脚本调用延迟在文档加载完成。

 

document.open()用于打开一个新文档，如果文档已经关闭或者加载完，未在document.write()之前调用document.open()方法则默认会创建新文档，这就是为什么在事件中使用document.write()方法会使当前文档的内容和脚本全部丢弃。

document.close()关闭文档流

doument.write()可以又多个参数，例如document.write(s,b,d);

 

上面说了document.write()在事件时输出文档会有文档，如果我要输出的话应该怎么办呢，我们可以用innerhtml或者dom 2中的文档creatElement,apendpchild等方法。

关于document.write
weixin_30851867的博客
08-21 1406
document.write的用处 document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法，它能够直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会重新利用document.open打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将重新构建DOM并渲...
{{JS}}document.write()方法详解
网站开发初中级代码参考-转载
08-14 660
document.write()允许把内容写入到文档中。这个方法是0级DOM的一部分。使用document.write()有两种方式： 1）在脚本中使用它，把HTML输入到当前正在解析的文档中。但要注意只能在当前文档解析时使用document.write()方法向其输出HTML代码。即只能在标记&lt;script&gt;的顶层代码中调用方法document.write()，因为这些脚本的执行是...
document write()的用法与注意事项
我是张跑跑
09-26 6052
1 概述 document.write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。 可列出多个参数(exp1,exp2,exp3,…) ，它们将按顺序被追加到文档中，默认情况是不会换行的。 我们通常按照两种的方式使用 write() 方法：一是在使用该方在文档中输出 HTML，另一种是在调用该方法窗口之外的窗口。在第二种情况中，请务必使用 close() 方法来关闭文档...
document.write 向文档中写内容，包括文本、脚本、元素之类的，但是它在什么时候执行不会覆盖当前页面内容尼？...
weixin_30340353的博客
09-09 409
当你打开一个页面，浏览器会 调用 document.open() 打开文档 document.write(...) 将下载到的网页内容写入文档 所有内容写完了，就调用 document.close() 触发 dom ready 事件（DOMContentReady) 所以你如果在第3步之前 document.write(1) 那么你就直接追加内容到当前位置，如果你在第3步之后 d...
document.write()详解
qq_43383323的博客
10-19 1万+
原博客：https://blog.csdn.net/wei_ke_zhi/article/details/82153778 一、document.write()运行原理 首先我们先了解一下这条语句运行的原理： document.write()是Javascript中对document.open()所开启的文档流操作的API方法。 它能够直接砸文档流中写入字符串，一旦文档流已经关闭，那么 document.write()就会重新运用document.open()打开新的文档流并写入，此时原来的文档流会被清.
去掉你代码里的 document.write(“＜script...）
zhuhaiuser的博客
05-07 685
在传统的浏览器中，同步的 script 标签是会阻塞 HTML 解析器的，无论是内联的还是外链的，比如： <script src="a.js"></script> <script src="b.js"></script> <script src="c.js"></script> <img src="a.jpg"> 在这个例子中，HTML 解析器会先解析到第一个 script 标签，然后暂停解析，转而去下载 a.js，下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var fun = function() { document.write("我是无参函数fun"); } var sum = function (num1, num2) { document.write("我是有参函数：") var result = num1 + num2; return result; } document.write(fun()); document.write("<br />") document.write(sum(100, 50)); </script> </body> </html> 这段代码结果为我是无参函数funundefined 我是有参函数：150 为什么会结果中会出现undefined
10-14
- 接着，`document.write(fun())`相当于`document.write(undefined)`，所以它继续在页面上写入`undefined`（注意：在字符串之后立即写入，没有换行，所以会紧挨着）。 4. 对比有参函数`sum`： ```javascript ...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #time{ width: 500px; height: 50px; background-color: white; } </style> </head> <body> <div id="time"> </div> </body> <script> var date = new Date() document.write(date.getFullYear()+"年") document.write(date.getMonth()+1+"月") document.write(date.getDate()+"日") document.write(date.getHours()+"时") document.write(date.toLocaleDateString()) document.write(date.toLocaleTimeString()) document.write(date.getDay()) var day = date.getDay() var arr =["日","一","二","三","四","五","六"] document.write("今天是星期"+arr[day]) function getdate(){ var date = new Date() var showTime = document.getElementById("time") var date1 = date.toLocaleDateString() var time1 = date.toLocaleTimeString() showTime.innerHTML="<br>"+date1+" "+time1 } getdate() setInterval('getdate()',500) </script> </html> 帮我修改<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #time{ width: 500px; height: 50px; background-color: white; } </style> </head> <body> <div id="time"> </div> </body> <script> var date = new Date() document.write(date.getFullYear()+"年") document.write(date.getMonth()+1+"月") document.write(date.getDate()+"日") document.write(date.getHours()+"时") document.write(date.toLocaleDateString()) document.write(date.toLocaleTimeString()) document.write(date.getDay()) var day = date.getDay() var arr =["日","一","二","三","四","五","六"] document.write("今天是星期"+arr[day]) function getdate(){ var date = new Date() var showTime = document.getElementById("time") var date1 = date.toLocaleDateString() var time1 = date.toLocaleTimeString() showTime.innerHTML="<br>"+date1+" "+time1 } getdate() setInterval('getdate()',500) </script> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #time{ width: 500px; height: 50px; background-color: white; } </style> </head> <body> <div id="time"> </div> </body> <script> var date = new Date() document.write(date.getFullYear()+"年") document.write(date.getMonth()+1+"月") document.write(date.getDate()+"日") document.write(date.getHours()+"时") document.write(date.toLocaleDateString()) document.write(date.toLocaleTimeString()) document.write(date.getDay()) var day = date.getDay() var arr =["日","一","二","三","四","五","六"] document.write("今天是星期"+arr[day]) function getdate(){ var date = new Date() var showTime = document.getElementById("time") var date1 = date.toLocaleDateString() var time1 = date.toLocaleTimeString() showTime.innerHTML="<br>"+date1+" "+time1 } getdate() setInterval('getdate()',500) </script> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #time{ width: 500px; height: 50px; background-color: white; } </style> </head> <body> <div id="time"> </div> </body> <script> var date = new Date() document.write(date.getFullYear()+"年") document.write(date.getMonth()+1+"月") document.write(date.getDate()+"日") document.write(date.getHours()+"时") document.write(date.toLocaleDateString()) document.write(date.toLocaleTimeString()) document.write(date.getDay()) var day = date.getDay() var arr =["日","一","二","三","四","五","六"] document.write("今天是星期"+arr[day]) function getdate(){ var date = new Date() var showTime = document.getElementById("time") var date1 = date.toLocaleDateString() var time1 = date.toLocaleTimeString() showTime.innerHTML="<br>"+date1+" "+time1 } getdate() setInterval('getdate()',500) </script> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #time{ width: 500px; height: 50px; background-color: white; } </style> </head> <body> <div id="time"> </div> </body> <script> var date = new Date() document.write(date.getFullYear()+"年") document.write(date.getMonth()+1+"月") document.write(date.getDate()+"日") document.write(date.getHours()+"时") document.write(date.toLocaleDateString()) document.write(date.toLocaleTimeString()) document.write(date.getDay()) var day = date.getDay() var arr =["日","一","二","三","四","五","六"] document.write("今天是星期"+arr[day]) function getdate(){ var date = new Date() var showTime = document.getElementById("time") var date1 = date.toLocaleDateString() var time1 = date.toLocaleTimeString() showTime.innerHTML="<br>"+date1+" "+time1 } getdate() setInterval('getdate()',500) </script> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #time{ width: 500px; height: 50px; background-color: white; } </style> </head> <body> <div id="time"> </div> </body> <script> var date = new Date() document.write(date.getFullYear()+"年") document.write(date.getMonth()+1+"月") document.write(date.getDate()+"日") document.write(date.getHours()+"时") document.write(date.toLocaleDateString()) document.write(date.toLocaleTimeString()) document.write(date.getDay()) var day = date.getDay() var arr =["日","一","二","三","四","五","六"] document.write("今天是星期"+arr[day]) function getdate(){ var date = new Date() var showTime = document.getElementById("time") var date1 = date.toLocaleDateString() var time1 = date.toLocaleTimeString() showTime.innerHTML="<br>"+date1+" "+time1 } getdate() setInterval('getdate()',500) </script> </html>帮我修改这个代码成这样 2025年5月10日 19:20：10 星期三
10-24
✅ 解决 `document.write` 的问题（避免页面被覆盖） --- ### ✅ 修改后的完整 HTML 代码 ```html <!DOCTYPE html> 实时时间显示 body { font-family: "Microsoft YaHei", Arial, sans-serif; display:...
document.write('.students').innerHTML = html;
07-14
以下是关于如何使用 `document.write()` 修改 HTML 元素内容的详细说明： ### 1. `document.write()` 的基本用法 `document.write()` 可以接受字符串参数，并将其直接插入到文档流中。它可以包含纯文本或 HTML 标签...
document.write()可以使用，element.innerHTML不能使用
08-08
然而，一旦文档加载完成，再调用 `document.write()` 会导致整个文档被清空并重新创建，这可能带来副作用，但也说明其在特定时机可以绕过某些限制[^4]。 相对而言，`element.innerHTML` 操作的是 DOM 元素的内容，...
document.write()
weixin_30393907的博客
01-06 211
document.write()通过文档流向页面写入 浏览器自身的文档流无法控制关闭 加载JavaScript时的write不会覆盖原页面内容 通过函数使用write时，会开启新的文档流，因此会覆盖原页面内容 转载于:https://www.cnblogs.com/voidchar/p/10228697.html...
document.write()的用法
limengyu_xmy的博客
09-04 1万+
一、定义和用法 文档节点的write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析。 语法：document.write() 参数：字符串，可以传多个字符串参数 返回值：undefined   二、注意事项 如果document.write()在DOMContentLoaded或load事件的回调函数中，当文档加载完成，则会先清空文档（自动调用document.open()），再把参数写入body内容的开头。 在异步引入的js和DOMContentLoaded或load事件
document.write的用处
weixin_30299539的博客
06-06 181
document.write -----能够直接在文档流中写入字符串 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
学习笔记—document write( )语法、功能、以及需要注意的‘坑’
热门推荐
公众号：前端蛋卷
04-21 3万+
语法：document.write(exp1,exp2,exp3,....)参数解析：（1）.expN：可以是一个或者多个参数，如果是多个参数，那么按照顺序写入文档。(如果写入多个参数的话，这些参数会自动换行显示)  (2)这里的参数可以是变量，也可以是函数体、函数自执行体，数字等等，也可以进行一些简单的运算  (3)参数支持标签属性，写入的时候会按照html进行解析，但是需要用字符串的形式(常用...
document write.md
small_ma
09-29 571
document.write 我们都很熟悉，document.write用于向document.open打开的文档流中写入内容。 但是document.write很可能会造成文档的重写 我们先来补充一些理论知识： 如果document.write向文档流中写入内容时，文档流没有打开。那么document.write会自动调用document.open打开文档流 如果在文档加载完毕后调用docum...
document write的用法
Jack huang的专栏
08-21 1387
document.write()方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。 记住，在载入页面后，浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write()方...
document.write()用法
細水、長流√的专栏
02-22 2万+
1.document.open() 功能：打开一个新文档，即打开一个流，并擦除当前文档的内容。 语法：document.open(mimetype,replace) 参数： mimetype：可选。规定正在写的文档的类型。默认值是”text/html”。 replace：可选。当此参数设置后，可引起新文档从父文档继承历史条目。 注1：open()方法将擦除当前HTML文档的内容，开始一个新的文档，新文档用write()方法或writeln()方法编写。 注2：调用open()方法打开一个新文档并且用wri
document中的write用法
wei_ke_zhi的博客
08-28 3万+
一、document.write()运行原理      首先我们先了解一下这条语句运行的原理：              document.write()是Javascript中对document.open()所开启的文档流操作的API方法。              它能够直接砸文档流中写入字符串，一旦文档流已经关闭，那么 document.write()就会重新运用document.open...
document.write也不行
最新发布
11-20
如果 `document.write` 也不显示，说明你可能**没有正确运行代码的环境**。我们来一步步排查并给出**一定能显示的解决方案**。 --- ### ✅ 问题分析：为什么 `document.write` 不显示？ 1. **你在浏览器控制台中...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值