在前端开发中，我们经常需要操作文档对象模型（DOM）来实现交互效果和页面渲染。通常情况下，我们可以使用纯 JavaScript 或者 jQuery 来完成这些任务。虽然 jQuery 在许多方面都比纯 JavaScript 更加便利和简单，但是了解它们的等效性可以帮助我们更好地理解 DOM 操作。
等效性对比
在 jQuery 中，大部分 DOM 操作方法都有对应的纯 JavaScript 方法。例如，jQuery 中的 $() 方法可以用纯 JavaScript 的 document.querySelector() 方法替代，.addClass() 方法可以用 .classList.add() 方法替代，.html() 方法可以用 .innerHTML 属性替代等等。
举个例子，我们可以使用以下两种方法来获取一个元素：
-- -- ------ ---- --- -------- - ----------------- -- --- ---------- ---- --- -------- - --------------------------------------
以上两种方式获得的结果是相同的，都是指向 id 为 #my-element 的元素。
除了基本的 DOM 操作外，jQuery 还提供了一些方便的方法，例如事件处理、动画效果、ajax 请求等等。这些方法在纯 JavaScript 中也可以实现，但是需要编写更多的代码。
ready() 方法
在使用 jQuery 或者纯 JavaScript 操作 DOM 时，需要确保页面已经加载完毕，DOM 元素已经准备就绪。在 jQuery 中，可以使用 ready() 方法来实现这一功能。
---------------------------- - -- - --- ---------- ---
在纯 JavaScript 中，可以使用以下方法来实现相同的功能：
--------------------------------------------- ---------- - -- - --- ---------- ---
需要注意的是，在纯 JavaScript 中，DOMContentLoaded 事件无法检测到图片等外部资源是否加载完成。如果需要等待所有资源都加载完成后再执行某些操作，可以使用 load 事件：
------------------------------- ---------- - -- ------------------- ---
示例代码
下面是一个简单的示例代码，演示了如何使用 jQuery 和纯 JavaScript 分别实现获取元素并添加 class 的功能，以及如何使用 ready() 方法在 DOM 准备就绪后执行代码：
--------- -----
------
------
------------- --- ------------------
------- -----------------------------------------------------------
-------
---------- -
------ ----
-
--------
-------
------
--- --------------------- -----------
--------
-- -- ------ ------- -----
--------------------------------------
-- --- ---------- ------- -----
--- ------ - -------------------------------------
----------------------------------
-- - --- ---------
---------------------------- -
-------------------- -------- -- ---------
---
--------------------------------------------- ---------- -
------------------------ ---------------- ----- ---------
---
---------
-------
-------在浏览器中打开该页面，可以在控制台中看到 jQuery 和纯 JavaScript 分别输出的日志信息。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/7941