无jQuery时如何实现文档对象模型(DOM)加载完毕后执行脚本？

DOM 加载完毕后执行脚本

背景

在构建交互式 web 应用程序时，经常需要在文档对象模型 (DOM) 完全加载后执行脚本。$(document).ready 函数（jQuery 库的一部分）提供了一种便捷的方法来实现这一功能。然而，在没有 jQuery 的情况下，需要其他方法。

实现 DOMContentLoaded 事件

DOMContentLoaded 事件在 DOM 加载完成后触发，但不会等到外部资源（图像、帧等）加载完毕。可以使用以下代码监听该事件：

document.addEventListener("DOMContentLoaded", function() {
  // 你的代码
});

轮询

轮询涉及使用 setInterval() 函数定期检查 document.readyState 属性。当属性变为 "complete" 时，表示 DOM 已加载完成。可以使用以下代码进行轮询：

var interval = setInterval(function() {
  if (document.readyState === "complete") {
    clearInterval(interval);
    // 你的代码
  }
}, 10);

原生 JavaScript 选择器

对于简单操作（获取元素、设置样式），可以使用原生 JavaScript 选择器：

document.querySelector("body").style.backgroundColor = "red";

考虑外部资源

请注意，这些方法都不会等到外部资源加载完毕。对于依赖外部资源的脚本，需要使用其他方法，例如：

• window.onload 事件
• 资源加载库

结论

在没有 jQuery 的情况下，可以通过 DOMContentLoaded 事件、轮询或原生 JavaScript 选择器实现类似 $(document).ready 的功能。根据应用程序的具体要求，选择最合适的解决方案至关重要。

常见问题解答

1. 什么时候需要在 DOM 加载完成后执行脚本？

• 当脚本依赖于 DOM 元素存在或样式化时。

2. 为什么 $(document).ready 比其他方法更方便？

• jQuery 提供了一个简洁易用的 API，可以处理 DOM 加载事件。

3. 轮询是否比 DOMContentLoaded 事件更可靠？

• 在某些浏览器中，DOMContentLoaded 事件可能无法触发，因此轮询可以作为一种更可靠的后备方法。

4. 原生 JavaScript 选择器可以用于所有操作吗？

• 对于简单操作，原生 JavaScript 选择器是可行的，但对于复杂操作，可能需要使用第三方库。

5. 如何处理外部资源加载？

• 可以使用 window.onload 事件或资源加载库，以确保脚本在所有资源加载完成后执行。