二、选择器
1、准备篇
（1）基础的基础：DOM模型
文件对象模型（Document Object Model，DOM）是给 HTML 与 XML 文件使用的一组 API。它提供了文件的结构表述（representation），让你可以更动其中的内容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。
所有网页设计师可操作及建立文件的属性、方法及事件都以[对象]来展现（例如，document 就代表「文件本身」这个对象，table 对象则代表 HTML 的表格对象等等）。这些对象可以由当今大多数的浏览器以 Script 来取用。
DOM 最常被用以[与 JavaScript 沟通]，也就是说虽然程序以 JavaScript? 写成，但使用 DOM 来存取页面及其元素。无论如何，DOM 本身是设计为一种独立的程序语言，以一致的 API 存取文件的结构表述；是以虽然本站的焦点放在 JavaScript? 上，但 DOM 其实可以与[任何程序语言]共同运作。
[全球信息网协会]（World Wide Web Consortium，W3C）建立了 [DOM] 的标准，称之为「W3C DOM」。在当今主要浏览器都已正确实作的情况下，W3C DOM 使强大、跨浏览器的应用程序成真。这是众网页设计师在 Netscape 4 与 MSIE 多不相容的时代从未梦想过的事情。
DOM的结构：
| 节点形态 | 节点对象所代表的XML文件组件 | 节点名称（nodeName 对象属性） | 节点的值（nodeValue 对象属性） |
| 文件（Document） | 文件阶层中的根节点（代表整个XML 文件） | #document | Null |
| 元素（Element） | 元素 | 元素形态名称(例如，BOOK) | null（包含在元素中的（Element）任何字符数据，是位在一个或多个子文字节点中） |
| 文字（Text） | 属于由这个节点的父节点所代表的元素，属性及实体的文字。 | #text | 父XML 组件的文字 |
| 属性（Attribute） | 属性 (以及其它的名值对，像处理指令中的名字与值) | 属性名称 (如Binding) | 属性值（例如hardcover） |
| 处理指令 （Processing Instruction ） | 处理指令（XML 宣告或自订的处理指令） | 处理指令的目标（例如xml） | 除了目标之外整个处理指令的内容（例如，Version "1.0"） |
| 批注（Comment） | 批注 | #comment | 在批注符号中的文字 |
| CDATA 区段（CDATASection） | CDATA 区段 | #cdata-section | CDATA 区段中的内容 |
| 文件类型（Document Type） |
文件形态宣告 | 出现在DOCTYPE 宣告中的根元素的名字(例如INVENTORY) | Null |
| 实体（Entity） | DTD 中的实体宣告 | 实体名称（例如image） | null （实体值是位在子文字节点中） |
| 标签 | DTD 中的标签宣告 | 标签名称（例如BMP） | >null （卷标的系统literal（Notation）是位在名为SYSTEM 的子Attribute node中） |
上表中用来表示不同XML 文件组件的基本节点形态。这些类型的每一个节点都是一个程序设计对象，提供了存取相关组件的属性与方法。
每个节点，就像可程序化的对象，提供了属性和方法，让你可以存取、显示、管理，和取得对应到XML 组件上的信息。例如，nodeName 和nodeValue 属性（表1 所示）提供了元素的名称及内含值。
| 属性 | 描述 | 范例 |
| attributes | 该节点的所有非属性的子节点的NamedNodeMap 集合 | AttributeNode =Element.attributes.getNamedItem ("Binding"); |
| childNodes | 该节点的所有非属性的子节点的NodeList 集合 | FirstNode =Element.childNodes (0); |
| dataType | 该节点的数据类型（只适用于某些类型Attribute 节点） | AttributeType =Attribute.dataType; |
| firstChild | 该节点的第一个非属性的子节点 | FirstChildNode =Element.firstChild; |
| lastChild | 该节点的最后一个非属性的子节点 | LastChildNode =Element.lastChild; |
| nextSibling | 与本节点位于同一层级的后继前一节点 | NextElement =Element.nextSibling; |
| nodeName | 节点的名称 | ElementName =Element.nodeName; |
| nodeType | 表示该节点类型的数值码 | NodeTypeCode =Node.nodeType; |
| nodeTypeString | 包含该节点类型的字符串，以小写字母撰写（例如，"element"或"attribute"） | NodeTypeString=Node.nodeTypeString; |
| nodeValue | 该节点的值（如果不含值则为null） | AttributeValue =Attribute.nodeValue; |
| ownerDocument | 包含本节点的文件的根Document 节点 | Document =Node.ownerDocument; |
| parentNode | 该节点的父节点（并不适用于Attribute 节点） | ParentElement =Element.parentNode; |
| previousSibling | 与本节点位于同一层级的先前节点 | PreviousElement =Element.previousSibling; |
| text | 该节点与其后裔节点的全部文字内容 | AllCharacterData =Element.text; |
| xml | 该节点与其后裔节点的全部XML 内容 | XMLContent =Element.xml; |
例如：在这个页面中：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.gooddo.com</title>
</head>
<body>
<div>
<p><a href="http://www.gooddo.com/" target="_blank">www.gooddo.com</a></p>
<p><a href="http://www.downke.cn/" target="_blank">www.downke.cn</a></p>
<p><a href="http://www.hotbook.cn/" target="_blank">www.hotbook.cn</a></p>
</div>
</body>
</html>
DOM可以看成是家族式的元素的集合。
html是所以元素的祖元素，其它的元素都是它的后代元素。
head 和body是html的子元素。反之，html是head\body两者的父元素。
div是body的子元素，p是div的子元素，p是body的后代元素。p之间是同辈的元素。