阿杰，我们来详细解析 document.write()，这是 JavaScript 中最早期用于向网页写入内容的方法，虽然现在不推荐在现代开发中大量使用，但理解它有助于理解浏览器渲染和 DOM 操作。下面我给你整理一个系统的讲解。

一、基本概念

  • 定义：document.write() 是 document 对象的方法，用于直接向网页输出文本或 HTML 代码。
  • 语法：
document.write(string1, string2, ..., stringN)
  • 参数可以是一个或多个字符串（逗号分隔），最终会拼接输出到页面。

二、基本用法示例

1. 输出简单文本

<!DOCTYPE html>
<html>
<head><title>Document Write 示例</title></head>
<body>
<script>
document.write("Hello, World!");
</script>
</body>
</html>

效果：页面中显示 Hello, World!。

2. 输出 HTML 元素

<script>
document.write("<h1 style='color:red;'>这是一个红色标题</h1>");
document.write("<p>这是段落文本</p>");
</script>
  • document.write() 会解析 HTML 标签，因此可以直接输出 HTML 元素。
  • 注意：标签必须写在字符串内，并加上引号。

3. 输出多个内容

document.write("Hello, ", "JavaScript ", "World!");
  • 多个参数会顺序拼接，效果：Hello, JavaScript World!

三、使用时的注意事项

1. 在页面加载中使用

  • document.write() 最常在 页面加载时使用。
  • 如果在 页面加载完成后调用，会清空整个页面内容：
window.onload = function() {
    document.write("页面已被清空！");
}

执行后整个页面会被替换，只剩下输出的内容。

2. 对现代开发不推荐

  • 原因：
    1. 不利于 DOM 操作，容易破坏现有元素。
    2. 破坏 页面缓存和渲染性能。
    3. 与现代前端框架（React、Vue 等）冲突。
  • 替代方案：
    • 使用 innerHTML：
document.getElementById("demo").innerHTML = "<p>新内容</p>";
  • 使用 DOM 方法创建元素：
const p = document.createElement("p");
p.textContent = "新内容";
document.body.appendChild(p);

3. 与异步脚本冲突

  • 异步加载脚本（async / defer）中使用 document.write() 可能导致 页面渲染异常。
  • 现代网站几乎不使用 document.write() 来加载资源文件。

四、实际应用场景

虽然现代开发中不推荐，document.write() 仍在某些场景有用：

  1. 快速测试 HTML 输出
document.write("<h2>测试标题</h2>");
  1. 动态生成页面内容（早期网页）
for(let i=1;i<=5;i++){
    document.write("<p>第" + i + "段</p>");
}
  1. 生成广告脚本
  • 早期广告经常使用 document.write() 插入广告代码（现在更推荐使用异步加载）。

五、总结

特性说明
方法类型document 对象方法
参数一个或多个字符串
支持 HTML支持，直接解析标签
页面加载时正常输出
页面加载完成后会清空原页面内容
现代开发建议避免使用，推荐 innerHTML 或 DOM 方法

好，阿杰，我帮你整理了一个 “document.write() 超详细示例合集”，涵盖各种常用场景、循环、数组、对象输出以及与 DOM 方法对比，方便你全面理解。

document.write() 超详细示例合集

一、基础输出

1. 输出简单文本

<script>
document.write("Hello, World!<br>");
document.write("这是 document.write() 输出的文本。<br>");
</script>

2. 输出 HTML 元素

<script>
document.write("<h1 style='color:red;'>红色标题</h1>");
document.write("<p>这是一个段落</p>");
</script>

3. 输出多个参数

<script>
document.write("Hello, ", "JavaScript ", "World!", "<br>");
</script>

二、循环输出

1. 输出数字列表

<script>
for(let i=1; i<=5; i++){
    document.write("第 " + i + " 项<br>");
}
</script>

2. 输出 HTML 列表

<script>
document.write("<ul>");
for(let i=1; i<=3; i++){
    document.write("<li>列表项 " + i + "</li>");
}
document.write("</ul>");
</script>

三、数组与对象输出

1. 数组

<script>
const fruits = ["苹果", "香蕉", "橙子"];
document.write("水果清单：<br>");
for(let i=0; i<fruits.length; i++){
    document.write(fruits[i] + "<br>");
}
</script>

2. 对象

<script>
const person = {name: "小明", age: 18, city: "北京"};
document.write("个人信息：<br>");
for(let key in person){
    document.write(key + "：" + person[key] + "<br>");
}
</script>

四、与 DOM 方法对比

1. 使用 document.write() 替换整个页面

<script>
document.write("<h2>页面已被替换</h2>");
</script>

注意：在页面加载完成后调用，会清空原有内容。

2. 使用 innerHTML 修改部分内容（推荐）

<div id="demo">原始内容</div>
<script>
document.getElementById("demo").innerHTML = "<h2>用 innerHTML 修改的内容</h2>";
</script>

优点：不会清空整个页面，只修改指定元素。

3. 使用 DOM 方法动态创建元素

<div id="container"></div>
<script>
const p = document.createElement("p");
p.textContent = "用 DOM 方法创建的段落";
document.getElementById("container").appendChild(p);
</script>

优点：最安全、最现代的动态操作方法。

五、趣味示例：输出 LOVE 爱心

<script>
document.write("&nbsp;&nbsp;**&nbsp;&nbsp;**<br>");
document.write("**&nbsp;**&nbsp;**<br>");
document.write("&nbsp;**&nbsp;**&nbsp;<br>");
document.write("&nbsp;&nbsp;**&nbsp;<br>");
</script>

六、注意事项总结

  1. 页面加载阶段使用：适合测试或生成静态内容。
  2. 页面加载完成后调用：会清空整个页面内容，慎用。
  3. HTML 标签解析：支持直接输出 HTML 标签。
  4. 现代开发替代：
    • 小范围修改：innerHTML
    • 安全动态操作：DOM 方法（createElement、appendChild 等）