在 JavaScript 页面加载完毕后执行代码的完整步骤
在网页开发中，确保 JavaScript 代码在页面加载完毕后执行是非常重要的。这可以确保当你的脚本运行时，所有的 DOM 元素都已完全加载，并准备被访问或操作。下面，我们将通过简单的步骤来教会你如何实现这一功能。
整体流程
首先，我们需要明确实现这一功能的步骤。下面是一个简单的流程图，展示了整个过程。
journey
title JavaScript 页面加载后执行
section 步骤 1
创建 HTML 文件: 5: 角色 A
section 步骤 2
添加 JavaScript 代码: 5: 角色 A
section 步骤 3
使用合适的方法来等待页面加载: 5: 角色 A
section 步骤 4
运行代码，测试效果: 5: 角色 A
步骤详解
步骤 1: 创建 HTML 文件
首先，你需要一个 HTML 文件，这是网页的基本结构。在你的项目文件夹中，创建一个名为 index.html 的文件，并在其中添加基本的 HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 页面加载完毕示例</title>
</head>
<body>
欢迎访问我的网页
<p id="message"></p> <!-- 这是一个用于显示消息的元素 -->
<!-- 引入 JavaScript 文件 -->
<script src="script.js"></script>
</body>
</html>
在上述代码中，我们创建了一个简单的网页，包含一个标题和一个段落元素（
<p>），我们将在 JavaScript 中修改这个元素的内容。
步骤 2: 添加 JavaScript 代码
接下来，创建一个名为 script.js 的文件，用于存放 JavaScript 代码。在这个文件中，我们将编写代码来在页面加载完成后执行。
步骤 3: 使用合适的方法来等待页面加载
在 script.js 文件中，我们有几种方法可以在页面加载完成后执行代码。这里介绍使用 DOMContentLoaded 事件和 window.onload 方法两种常用的方法。
方法 1: 使用 DOMContentLoaded 事件
document.addEventListener("DOMContentLoaded", function() {
// 这段代码将在 DOM 加载完成后执行
document.getElementById("message").textContent = "页面已加载完毕！";
});
在这段代码中，当 DOM 完全加载后，
DOMContentLoaded事件会被触发。我们通过该事件的回调函数来执行赋值操作。
方法 2: 使用 window.onload 方法
window.onload = function() {
// 这段代码将在整个页面加载完毕后执行
document.getElementById("message").textContent = "整个页面（包括样式表和图像）已加载完毕！";
};
这里使用
window.onload方法，它会在整个页面（包括 HTML、CSS、图像等）加载完成后执行相应的操作。
步骤 4: 运行代码并测试效果
现在，你可以通过浏览器打开 index.html 文件，查看效果。你会发现页面加载完成后，段落的内容会被 JavaScript 代码更新。
小结
到此为止，我们已经学习了如何在 JavaScript 中确保代码在页面加载后执行的两种方法：DOMContentLoaded 事件和 window.onload 方法。你可以根据实际需求选择适合的方法。
希望这篇文章能够帮助你掌握如何在网页加载完成后执行 JavaScript 代码的技巧。随着你对 JavaScript 的深入了解，你将会发现更多有趣的功能和技术，祝你在编程的旅程中不断探索与成长！
