本文详细介绍了如何使用原生JavaScript替代$(document).ready()，以在DOM内容加载完成后执行代码。主要通过DOMContentLoaded事件和window.onload事件进行实现，并提供了具体示例、两者间的差异对比及选择建议，帮助开发者构建无jQuery依赖的现代Web应用。
在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 的对比
触发时机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应用。在选择使用哪个事件时，请根据你的具体需求（是否需要等待所有外部资源加载）做出明智的决定。
以上就是告别jQuery：使用原生JavaScript处理DOM加载完成事件的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/63719.html
微信扫一扫 
支付宝扫一扫 
