📌  相关文章
📜  dom 就绪后的 javascript - Javascript (1)

📅  最后修改于: 2023-12-03 14:40:51.537000             🧑  作者: Mango

JavaScript 在 DOM 就绪后的执行

简介

Web 开发中，常常需要使用 JavaScript 来操作 DOM 元素，例如修改样式、绑定事件等。然而在页面加载时，DOM 并不一定已经完全加载完毕，如果此时直接操作 DOM 元素，可能会导致出错。

因此，我们需要一种方式来确保 DOM 元素已经加载完毕，然后再执行 JavaScript 操作。本文将介绍一些常见的 DOM 就绪后的 JavaScript 执行方法，以及它们的优缺点。

方法一：window.onload

window.onload 是最常见的 DOM 就绪后执行 JavaScript 的方法。它只有在整个页面包括图片等所有元素都加载完毕后才会执行，因此可以确保 DOM 已经完全加载完毕。

window.onload = function() {
  // 在此处书写 JavaScript 代码
};

优点：

  • 能够确保整个页面都已经加载完毕，保证了 DOM 元素已经完全加载完毕
  • 简单易懂，易于入手

缺点：

  • 当页面中存在大量图片或其他资源时，可能需要等待较长时间才能执行 JavaScript 代码
  • 只能绑定一个函数，不便于管理和维护
  • 在将多个 window.onload 事件处理函数绑定到同一个事件上时，后面的一个会覆盖前面的一个
方法二：DOMContentLoaded 事件

DOMContentLoaded 事件是另一种常见的 DOM 就绪后执行 JavaScript 的方法。它会在 DOM 树构建完成后立即执行，而不需要等待所有资源的加载完成。因此，它比 window.onload 更快地执行 JavaScript 代码。

document.addEventListener('DOMContentLoaded', function() {
  // 在此处书写 JavaScript 代码
});

优点：

  • 不需要等待所有资源都加载完毕，可以快速执行 JavaScript 代码
  • 可以同时绑定多个事件处理函数
  • 可以在页面任意位置使用，无需将代码都集中在 window.onload 事件处理函数中

缺点：

  • 在 IE9 或更早版本中不支持该事件，需要使用 attachEvent 方法替代 addEventListener 方法
  • 如果要查询 DOM 元素，需要将代码放在 DOMContentLoaded 事件处理函数内，否则可能会找不到某些元素
方法三：jQuery $(document).ready() 方法

$(document).ready() 方法是 jQuery 提供的一种 DOM 就绪后执行 JavaScript 的方法。它会在 DOM 树构建完成后立即执行，而不需要等待所有资源的加载完成，与 DOMContentLoaded 事件类似。它的语法如下：

$(document).ready(function() {
  // 在此处书写 JavaScript 代码
});

优点：

  • 可以同时绑定多个事件处理函数
  • 代码更加简洁，易于维护和管理

缺点：

  • 需要引入 jQuery 库
  • 如果页面中有多个 $(document).ready() 方法，后面的一个会覆盖前面的一个
方法四：defer 属性

defer 属性是 HTML5 新增的属性，用于告诉浏览器推迟脚本的执行，直到文档加载完毕。它适用于不需要操作 DOM 元素的 JavaScript 代码，因为在推迟执行期间，DOM 元素可能还没有完全加载好。

<script src="your-script.js" defer></script>

优点：

  • 既可以确保 DOM 元素已经加载完毕，又能在不影响页面加载速度的情况下执行 JavaScript 代码
  • 可以同时使用多个 defer 属性，无需担心覆盖问题

缺点：

  • 如果需要进行 DOM 操作，需要等待 DOMContentLoaded 事件或 $(document).ready() 事件触发后再执行
  • 一些旧版本浏览器不支持该属性
总结

以上就是常见的 DOM 就绪后执行 JavaScript 的方法。它们各有优缺点，开发者可以根据实际情况选择最合适自己的方法。在编写代码时，最好将 JavaScript 代码放在<body> 标签底部，因为这样可以减少页面加载时间，提高用户体验。