在Web开发中，我们经常需要在页面的文档对象模型（DOM）完全加载和解析完毕后执行JavaScript代码。jQuery库提供了便捷的$(document).ready()方法来处理这一需求。然而，随着现代JavaScript和浏览器API的不断发展，我们完全可以使用原生JavaScript实现相同的功能，从而减少对外部库的依赖，提升页面性能。本文将深入探讨如何使用原生JavaScript替代$(document).ready()。
$(document).ready()的作用是在DOM结构完全加载和解析完毕后执行其内部的回调函数。这意味着即使页面中的图片、样式表等外部资源尚未完全加载，脚本也能开始操作DOM。这是为了确保在尝试查找或修改DOM元素时，这些元素已经存在于文档中。
原生JavaScript提供了两种主要的事件来处理文档加载状态：DOMContentLoaded和window.onload。
DOMContentLoaded事件在初始HTML文档被完全加载和解析后触发，而无需等待样式表、图片和子框架等所有外部资源加载完成。这使得它成为$(document).ready()最直接、最接近的替代方案，通常也是处理DOM操作的首选。
立即学习“Java免费学习笔记（深入）”；
语法：
document.addEventListener('DOMContentLoaded', function() {
// 在DOM完全加载和解析后执行的代码
// 此时可以安全地访问和操作DOM元素
});示例：启用表单提交按钮
假设我们有一个表单，其中包含一系列单选按钮，并且我们希望在用户选择任一单选按钮后启用提交按钮。使用DOMContentLoaded事件可以确保在脚本尝试查找这些按钮时，它们已经存在于DOM中。
原始jQuery代码（示例问题中的代码）：
$(document).ready(function(){
if (document.querySelector('input[name="benefitType"]')) {
document.querySelectorAll('input[name="benefitType"]').forEach((elem, i) => {
elem.addEventListener("change", function(event) {
document.querySelector('#benefit-quote-submit').disabled = false;
});
});
}
});使用DOMContentLoaded的原生JavaScript实现：
document.addEventListener('DOMContentLoaded', function() {
// 获取所有名为 "benefitType" 的单选按钮
const benefitTypeInputs = document.querySelectorAll('input[name="benefitType"]');
// 检查是否存在这些单选按钮
if (benefitTypeInputs.length > 0) {
// 遍历每个单选按钮，并添加 'change' 事件监听器
benefitTypeInputs.forEach(elem => {
elem.addEventListener("change", function() {
// 获取提交按钮
const submitButton = document.querySelector('#benefit-quote-submit');
// 如果提交按钮存在，则启用它
if (submitButton) {
submitButton.disabled = false;
}
});
});
}
});优点：
window.onload事件在整个页面（包括所有依赖资源，如图片、样式表、子框架等）都已完全加载后触发。这意味着它会在DOMContentLoaded事件之后触发。
语法：
window.onload = function() {
// 在所有资源都加载完毕后执行的代码
};
// 或者使用 addEventListener (推荐，因为可以添加多个监听器)
window.addEventListener('load', function() {
// 在所有资源都加载完毕后执行的代码
});示例：启用表单提交按钮（使用window.onload）
虽然对于上述DOM操作的场景，DOMContentLoaded更合适，但为了演示，我们也可以使用window.onload。
window.onload = function() {
const benefitTypeInputs = document.querySelectorAll('input[name="benefitType"]');
if (benefitTypeInputs.length > 0) {
benefitTypeInputs.forEach(elem => {
elem.addEventListener("change", function() {
const submitButton = document.querySelector('#benefit-quote-submit');
if (submitButton) {
submitButton.disabled = false;
}
});
});
}
};优点：
缺点：
| 特性 | DOMContentLoaded | window.onload |
|---|---|---|
| 触发时机 | DOM树构建完成，但外部资源（图片、样式等）可能未加载。 | 整个页面及其所有依赖资源（图片、样式、框架等）全部加载完成。 |
| 速度 | 通常更快 | 通常更慢 |
| 用途 | 大多数DOM操作、事件绑定等 | 需要所有资源都加载完成才能进行的任务（如获取图片尺寸、复杂布局计算） |
| 等效jQuery | 最接近 $(document).ready() | 类似于 $(window).load() (jQuery 3.0+ 已移除) |
总结： 对于大多数需要操作DOM的场景，DOMContentLoaded是$(document).ready()的最佳原生替代方案。只有当你的JavaScript代码确实依赖于所有外部资源的完整加载（例如，需要获取图片的确切尺寸，或者等待CSS完全应用后的布局计算）时，才应该考虑使用window.onload。
document.readyState的局限性： 在问题中提到尝试使用if(document.readyState === 'ready' || document.readyState === 'complete')。document.readyState属性可以反映文档的加载状态：
直接检查document.readyState的问题在于，如果你的脚本在页面加载的早期就运行，那么它可能在interactive或complete状态之前就已经执行了。因此，简单地一次性检查这个属性可能无法捕获到事件的发生。使用事件监听器（addEventListener）是更可靠和推荐的方式，因为它会在状态改变时通知你，无论脚本何时加载。
脚本位置： 将JavaScript代码放置在<body>标签的末尾（在</body>关闭标签之前）可以减少对DOMContentLoaded事件的依赖，因为此时HTML DOM的大部分内容已经解析。但即使如此，使用DOMContentLoaded仍然是最佳实践，因为它能明确地保证DOM的可用性。
兼容性：addEventListener和DOMContentLoaded在所有现代浏览器中都得到了广泛支持，无需担心兼容性问题。
通过掌握DOMContentLoaded和window.onload事件，开发者可以有效地摆脱对jQuery的依赖，用原生JavaScript编写出更轻量、更高效的Web应用。在选择使用哪个事件时，请根据你的具体需求（是否需要等待所有外部资源加载）做出明智的决定。
以上就是告别jQuery：使用原生JavaScript处理DOM加载完成事件的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
718
收藏
