在前端开发中，DOM 元素的加载是一个十分重要的环节。在加载某些 JavaScript 文件后，必须要等待 DOM 元素完全加载完成才能对其进行操作。为了方便开发者对 DOM 元素进行操作，社区提供了一款名为 when-ready 的 npm 包。
本文将为大家介绍 when-ready 包的使用教程，帮助大家轻松实现对 DOM 元素的全方位操作。
安装
使用 npm 安装 when-ready 包：
npm install when-ready
使用
首先，我们需要在 HTML 文件中引入相应的 JavaScript 文件：
<script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/when-ready.js"></script>
引入 when-ready.js 文件后，我们就可以使用 whenReady() 方法在 DOM 元素完全加载完成后执行指定的函数：
whenReady(function () {
// 在 DOM 元素完全加载完成后执行的逻辑
});需要注意的是，当 DOM 元素的加载准备就绪后，函数中的 this 对象将指向 window，因此如果需要对 DOM 元素进行操作，需要使用 jQuery 等库来实现。例如：
whenReady(function () {
$('#myDiv').fadeOut();
});当然，whenReady() 方法还提供了回调函数中传入 DOM 输入参数的方法，例如：
whenReady(function (doc) {
var myDiv = doc.getElementById('myDiv');
$(myDiv).fadeOut();
});通过回调函数的传参，我们就可以在仅传入一个函数的情况下操作 DOM 元素。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ----------
-------
------
---- -----------
----- ------
------
------- ---------------------- ------------------------------------------------------------------
------- ---------------------- -------------------------------------
------- -----------------------
------------------ ----- -
--- ----- - ----------------------------
-------------------
---
---------
-------
-------结论
when-ready 包是一个能够简化开发者操作 DOM 元素的 npm 包。通过 whenReady() 方法，我们可以在 DOM 元素完全加载完成后执行指定的函数，并使用传参功能来操作 DOM 元素，从而使得开发变得更加方便和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710b8dd3466f61ffe10a