在Web开发中，我们经常需要在页面的文档对象模型（DOM）完全加载和解析完毕后执行JavaScript代码。jQuery库提供了便捷的$(document).ready()方法来处理这一需求。然而，随着现代JavaScript和浏览器API的不断发展，我们完全可以使用原生JavaScript实现相同的功能，从而减少对外部库的依赖，提升页面性能。本文将深入探讨如何使用原生JavaScript替代$(document).ready()。
理解$(document).ready()的作用
$(document).ready()的作用是在DOM结构完全加载和解析完毕后执行其内部的回调函数。这意味着即使页面中的图片、样式表等外部资源尚未完全加载，脚本也能开始操作DOM。这是为了确保在尝试查找或修改DOM元素时，这些元素已经存在于文档中。
原生JavaScript的替代方案
原生JavaScript提供了两种主要的事件来处理文档加载状态：DOMContentLoaded和window.onload。
1. DOMContentLoaded 事件
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;
}
});
});
}
});优点：
- 速度快： 不等待外部资源加载，能更快地执行DOM操作脚本。
- 效率高： 适用于大多数需要操作DOM的场景。
2. window.onload 事件
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;
}
});
});
}
};优点：
- 完整性： 确保所有页面资源都已加载，适用于需要依赖图片尺寸、完整布局等信息的脚本。
缺点：
- 速度慢： 必须等待所有资源加载，可能导致脚本执行延迟。
- 覆盖性： 直接赋值window.onload = ...会覆盖之前设置的任何onload处理器。使用addEventListener则没有此问题。
DOMContentLoaded 与 window.onload 的对比
| 特性 | 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属性可以反映文档的加载状态：
- loading：文档正在加载。
- interactive：文档已经完成加载和解析，但外部资源（如图片、样式表）可能仍在加载中（大致对应DOMContentLoaded）。
- complete：文档和所有子资源都已完全加载（大致对应window.onload）。
直接检查document.readyState的问题在于，如果你的脚本在页面加载的早期就运行，那么它可能在interactive或complete状态之前就已经执行了。因此，简单地一次性检查这个属性可能无法捕获到事件的发生。使用事件监听器（addEventListener）是更可靠和推荐的方式，因为它会在状态改变时通知你，无论脚本何时加载。
-
脚本位置： 将JavaScript代码放置在
标签的末尾（在关闭标签之前）可以减少对DOMContentLoaded事件的依赖，因为此时HTML DOM的大部分内容已经解析。但即使如此，使用DOMContentLoaded仍然是最佳实践，因为它能明确地保证DOM的可用性。 兼容性：addEventListener和DOMContentLoaded在所有现代浏览器中都得到了广泛支持，无需担心兼容性问题。
通过掌握DOMContentLoaded和window.onload事件，开发者可以有效地摆脱对jQuery的依赖，用原生JavaScript编写出更轻量、更高效的Web应用。在选择使用哪个事件时，请根据你的具体需求（是否需要等待所有外部资源加载）做出明智的决定。
