jQuery 对象和 DOM 对象

1.DOM 对象

DOM（Document Object Model，文档对象模型），每一份 DOM 都可以表示成一棵树。下面来构建一个非常基本的网页，网页代码如下：

//...省略其他代码<h3></h3><p title="请选择你最喜欢的水果">你最喜欢的水果是？</p><ul> ???<li>苹果</li> ???<li>橘子</li> ???<li>菠萝</li></ul>//...省略其他代码

可以把上面的HTML结构描述为一棵DOM树，在这棵DOM树中，<h3>、<P>、<ul>以及<ul>的3个<li>子节点都是 DOM 元素节点。可以通过 JavaScript 中的 getElementsByTagName 或者 getElementById 来获取元素节点。像这样得到的 DOM 元素就是 DOM 对象。DOM 对象可以使用 JavaScript 中的方法，示例如下：

var domObj = document.getElementById("id"); ?//获取 DOM 对象var objHTML = domObj.innerHTML; ?????????????//使用JavaScript中的属性——innerHTML

2.jQuery 对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象，那么就可以使用 jQuery 里的方法。例如：

$("#foo").html()；//获取为 foo 的元素内的 html 代码。.html()是jQuery里的方法

这段代码等同于：

document.getElementById("foo").innerHTML;

在 jQuery 对象中无法使用 DOM 对象的任何方法。同样，DOM对象也不能使用 jQuery 里的方法。

注意：用#id作为选择符取得的是 jQuery 对象而并非 document.getElementById("id") 所得到的 DOM 对象，两者并不等价。

3.jQuery 对象转成 DOM 对象

jQuery 对象不能使用 DOM 中的方法，但如果对 jQuery 对象所提供的方法不熟悉，或者 jQuery 没有封装想要的方法，不得不使用 DOM 对象的时候，有以下两种处理方法。

jQuery 提供了两种方法将一个 jQuery 对象转换成 DOM 对象，即 [index] 和 get(index)。

1）jQuery 对象是一个类似数组的对象，可以通过 [index] 的方法得到相应的 DOM 对象。jQuery 代码如下：

var $cr = $("#cr"); ???????// jQuery对象var cr = $cr[0]; ??????????// DOM对象alert( cr.checked ); ??????// 检测这个checkbox是否被选中了

2）另一种方法是 jQuery 本身提供的，通过 get(index) 方法得到相应的 DOM 对象。jQuery 代码如下：

var $cr = $("#cr"); ?????????// jQuery对象var cr = $cr.get[0]; ????????// DOM对象alert( cr.checked ); ????????// 检测这个checkbox是否被选中了

4.DOM 对象转成 jQuery 对象

对于一个 DOM 对象，只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了。方式为 $(DOM对象)。jQuery 代码如下：

var cr = document.getElementById("cr"); ??????// DOM 对象var $cr = $(cr); ?????????????????????????????// jquery 对象

转换后，可以任意使用 jQuery 中的方法。

jQuery 对象和 DOM 对象

原文地址：https://www.cnblogs.com/jwen1994/p/10799418.html