正文

新手必看：轻松掌握原生JS检测DOM加载完成技巧

/0 浏览量
0423

在Web开发中，DOM（文档对象模型）的加载是一个重要的环节。有时候，我们希望在DOM完全加载完成后执行一些脚本或操作，这时就需要用到原生JavaScript的DOM加载检测技巧。下面，我将详细介绍几种常见的检测DOM加载完成的方法，帮助新手轻松掌握。

1. 使用DOMContentLoaded事件

DOMContentLoaded事件是当初始的HTML文档被完全加载和解析完成后立即触发的。这是一个非常适合检测DOM加载完成的时机。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM完全加载完成！');
  // 这里可以放置你希望在DOM加载完成后执行的代码
});

2. 使用load事件

load事件在页面及其依赖的资源（如图片、样式表、脚本等）完全加载完成后触发。这意味着当所有资源加载完毕，DOM完全可用时，此事件会被触发。

示例代码：

window.addEventListener('load', function() {
  console.log('页面及其依赖的资源完全加载完成！');
  // 这里可以放置你希望在所有资源加载完成后执行的代码
});

3. 使用onreadystatechange事件

onreadystatechange事件在元素的readyState属性变化时触发。当readyState的值为"complete"时，表示DOM完全加载完成。

示例代码：

document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    console.log('DOM完全加载完成！');
    // 这里可以放置你希望在DOM加载完成后执行的代码
  }
};

4. 使用MutationObserverAPI

MutationObserver是另一种可以用来监听DOM变化的方法。它允许你配置一个回调函数，在DOM发生变化时执行。

示例代码：

const observer = new MutationObserver(function(mutations) {
  if (document.readyState === 'complete') {
    console.log('DOM完全加载完成！');
    // 这里可以放置你希望在DOM加载完成后执行的代码
    observer.disconnect(); // 通知观察者停止监听
  }
});

observer.observe(document, {
  childList: true,
  subtree: true
});

总结

以上是几种常见的原生JavaScript检测DOM加载完成的方法。在实际应用中，你可以根据需要选择合适的方法来实现你的需求。希望本文能帮助你轻松掌握这些技巧，让你在Web开发的道路上更加得心应手。

-- 展开阅读全文 --