2.1　理解 DOM

jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务。DOM（Document Object Model，文档对象模型）充当了JavaScript与网页之间的接口；它以对象网络而非纯文本的形式来表现HTML的源代码。

DOM中的对象网络与家谱有几分类似。当我们提到网络中元素之间的关系时，会使用类似描述家庭关系的术语，比如父元素、子元素，等等。通过一个简单的例子，可以帮助我们理解文档各元素构成的树形结构：

  1. <html>
  2.   <head>
  3.     <title>the title</title>
  4.   </head>
  5.   <body>
  6.     <div>
  7.       <p>This is a paragraph.</p>
  8.       <p>This is another paragraph.</p>
  9.       <p>This is yet another paragraph.</p>
  10.     </div>
  11.   </body>
  12. </html>

这里，<html>是其他所有元素的祖先元素，换句话说，其他所有元素都是<html>的后代元素。<head>和<body>元素是<html>的子元素（但并不是它唯一的子元素）。因此除了作为<head>和<body>的祖先元素之外，<html>也是它们的父元素。而<p>元素则是<div>的子元素（也是后代元素），是<body>和<html>的后代元素，是其他<p>元素的同辈元素。这些元素之间的关系从下面的图2-1中可以看得更清楚。

2.1　理解 DOM - 图1

图　2-1

为了把DOM结构更形象地表现出来，可以使用很多工具，例如Firefox的Firebug插件、Safari和Chrome中的Web Inspector等。

有了这个元素树，就可以使用jQuery从中取得任何元素了。而我们用来取得元素的工具，就是jQuery选择符和遍历方法。