1.6 DOM对象和jQuery对象
DOM是英文Document Object Model（文档对象模型）的首字母缩写。如果没有document，DOM就无从谈起，因此只有类似(X)HTML、XML等属于文档类型的语言，才具有DOM。每一个(X)HTML页面都具有一个DOM，每一个DOM都可以表示成一棵树，这是理解DOM模型的关键。
1.6.1 DOM模型
下面构建一个基本的网页，网页代码如示例4所示。
示例4：
结构代码：
初始化后的效果如图1.6所示。
图1.6 DOM模型
在DOM里存在许多不同类型的节点，有些DOM节点还包含其他类型的节点。DOM里的节点通常分为3种类型，即元素节点、文本节点和属性节点。
1．元素节点
在图1.6所示的简单网页中，使用了<h2>、<p>和<ul>等元素。如把网页比作一幢建筑，那么元素就是这座建筑的砖块，这些元素在文档中的布局形成了文档的结构。在DOM树中，<html>元素是根元素，其他元素都是其子元素。
2．文本节点
网页的核心价值是传递和展现信息，如果页面对应的HTML DOM仅仅包括<head>、<body>、<div>、<ul>和<li>等元素节点，那么这个网页是没有任何实际意义的，因为它没有内容、没有信息。
在HTML DOM中，内容是由文本节点提供的，文本节点就是HTML中的文字内容。在示例代码中，<p>元素中包含的文本“你最喜欢的颜色是什么？”和<strong>元素中包含的“我最喜欢的颜色是红色，你呢？”等都是文本节点。
在HTML DOM文档中，文本节点总包含在元素节点内部，但并非所有元素节点都包含文本节点。例如，颜色列表中的<ul>元素的内部就不包含文本内容，包含文本内容的是它的子节点<li>元素。
3．属性节点
属性节点的作用是对元素做出更具体的描述。在上面的示例中，<p>元素的title属性和<img>元素的src和alt属性就是属性节点，开发人员可以利用属性节点对包含在元素里的内容做出准确的描述。
属性节点都是元素节点的子节点，相应的，属性总被放在元素节点的起始标签内。不是所有元素节点都必须包含属性节点，如元素节点<h2>中就没有包含属性节点，仅包含了文本节点“DOM模型示例”。
1.6.2 DOM对象
在JavaScript中，可以使用getElementsByTagName()或者getElementById()来获取元素节点，通过该方式得到的DOM元素就是DOM对象，DOM对象可以使用JavaScript中的方法。代码如下：
1.6.3 jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法。例如：
这段代码等同于如下代码：
在jQuery对象中无法直接使用DOM对象的任何方法，例如，$("#id").innerHTML和$("#id").checked之类的写法都是错误的，可以使用$("#id").html()和$("#id").attr("checked")之类的jQuery方法来代替。同样，DOM对象也不能使用jQuery里的方法，例如document.getElementById("id").html()也会报错，只能使用document.getElementById("id").innerHTML语句。
1.6.4 jQuery对象与DOM对象的相互转换
在使用jQuery的开发过程中，jQuery对象和DOM对象互相转换是常用的方式。jQuery对象转换为DOM对象的主要原因是：DOM对象包含了一些jQuery对象没有包含的元素，要使用这些元素就必须进行转换。总之，jQuery对象的成员要丰富得多，通常开发者会把DOM对象转换成jQuery对象。
在讨论jQuery对象和DOM对象的相互转换之前，先约定定义变量的风格，如果获取的对象是jQuery对象，那么在变量前面加上$，例如：
如果获取的对象是DOM对象，则定义如下：
下面看看在实际应用中是如何进行jQuery对象与DOM对象的相互转换的。
1．jQuery对象转换成DOM对象
jQuery提供了两种方法将一个jQuery对象转换成一个DOM对象，即[index]和get(index)。
（1）jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。
代码如下所示：
（2）通过get(index)方法得到相应的DOM对象。
代码如下所示：
jQuery对象转换成DOM对象在实际开发中并不多见，除非希望使用DOM对象特有的成员，如outerHTML属性，通过该属性可以输出相应的DOM元素的完整的HTML代码，而jQuery并没有直接提供该功能。
2．DOM对象转换成jQuery对象
对于一个DOM对象，只需要用$()函数将DOM对象包装起来，就可以获得一个jQuery对象，其方式为$(DOM对象)。
jQuery代码如下所示：
转换后，可以任意使用jQuery中的方法。
在实际开发中，将DOM对象转换为jQuery对象多见于jQuery事件方法的调用中。在后续内容中将会接触到更多的关于DOM对象转换为jQuery对象的应用场景。
DOM对象只能使用DOM中的方法，jQuery对象不可以直接使用DOM中的方法。