dom对象和jquery对象
DOM 对象与 jQuery 对象的区别
DOM 对象
DOM（Document Object Model）对象是浏览器原生提供的 JavaScript 对象，直接操作网页的 HTML 元素。例如通过 document.getElementById() 或 document.querySelector() 获取的对象是原生 DOM 节点，具有标准属性和方法（如 innerHTML、appendChild）。
- 示例：
const domElement = document.getElementById("example"); domElement.style.color = "red"; // 直接操作 DOM 属性
jQuery 对象
jQuery 对象是通过 jQuery 封装 DOM 对象后的类数组对象。它提供了简化的 API（如 html()、css()），并支持链式调用。jQuery 方法内部会处理浏览器兼容性问题。
- 示例：
const $jQueryObject = $("#example"); $jQueryObject.css("color", "blue").fadeOut(); // 链式调用
相互转换的方法
DOM 转 jQuery 对象
将 DOM 对象作为参数传入 jQuery 函数即可：
const domElement = document.querySelector("div");
const $jQueryObject = $(domElement); // 转为 jQuery 对象jQuery 转 DOM 对象
通过索引或 .get() 方法获取原生 DOM：
const $jQueryObject = $("div");
const domElement1 = $jQueryObject[0]; // 方式1：索引
const domElement2 = $jQueryObject.get(0); // 方式2：.get()注意事项
- 方法不通用：DOM 对象的原生方法（如
addEventListener）不能直接在 jQuery 对象上调用，反之亦然。 - 性能差异：直接操作 DOM 通常性能更高，但 jQuery 简化了复杂操作（如动画、AJAX）。
- 错误处理：jQuery 方法对空对象静默失败，而 DOM 操作可能抛出错误。
适用场景
- DOM 对象：需要高性能或使用原生 API（如 Canvas、WebGL）。
- jQuery 对象：快速开发、兼容多浏览器或需要链式操作时。
