1. 介绍
在Web开发中，有许多情况需要在元素加载完成后执行一些JavaScript代码。比如，根据页面上的元素动态更新页面，或者根据用户的操作更新数据。
在本文中，我们将讨论如何在HTML中加载完成后执行JavaScript代码。
2. HTML中的JavaScript
在HTML中，可以使用<script>标签将JavaScript代码插入到页面中。
<html>
<head>
<title>Example</title>
<script>
//JavaScript代码
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
3. 加载顺序
当浏览器解析HTML文件时，它会按照定义的顺序依次加载文件中的元素。
当浏览器遇到一个<script>标签时，它会停止加载HTML文件并立即下载并执行该标签中包含的JavaScript代码。
3.1 顺序问题
当多个<script>标签存在于HTML文件中时，它们的加载顺序会影响JavaScript代码的执行顺序。
<html>
<head>
<title>Example</title>
<script src="file1.js"></script>
<script src="file2.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
在上面的示例中，如果file1.js包含需要在file2.js之前执行的某些函数，则应该将它们放在适当的位置。
3.2 加载事件
当需要确保HTML文件中的所有元素都已加载并且准备好时再执行JavaScript代码时，可以使用_window.onload事件。
<html>
<head>
<title>Example</title>
<script>
_window.onload = function() {
//在HTML加载完成后执行JavaScript代码
};
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
当_window.onload事件被触发时，所有的HTML元素都已被完全加载。
4. 加载完成事件
HTML5提供了一个更优雅的方式来确保元素被加载并准备就绪，即使用DOMContentLoaded事件。
<html>
<head>
<title>Example</title>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
//在元素加载完成后执行JavaScript代码
});
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
与_window.onload事件不同，DOMContentLoaded事件仅在HTML文档的DOM树结构完全建立后触发，而不会等待外部资源的下载。
相比之下，早期的网页通常包含大量的外部资源，如图片、CSS和JavaScript文件，这些文件会延迟页面建成的时间。
5. 总结
在本文中，我们讨论了如何在HTML文件中确保元素已加载和就绪后执行JavaScript代码。
使用_window.onload事件可以等待HTML文档中全部内容包括外部资源都已被加载后再执行JavaScript代码。但是，这可能需要较长时间，因此稍微优于DOMContentLoaded事件，可以在DOM树建完之后即可执行脚本。
无论使用哪种方法，检查元素在HTML中是否加载完成，都可以确保在需要时正确执行JavaScript代码。