1. Node类型
1.1 什么是DOM
DOM是针对HTML和XML文档的一个API，它描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记，每个节点都拥有自己的特点、数据和方法，另外也与其他节点存在某种关系，节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树型结构。
1.2 Node
DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。Node接口在JavaScript中是作为Node类型实现的，除IE外，其他所有浏览器都可以访问到这个类型。JavaScript中的所有节点类型都继承自Node类型，节点类型由在Node类型中定义的下列12个数值常量来表示：
1) Node.ELEMENT_NODE(1)
2) Node.ATTRIBUTE_NODE(2)
3) Node.TEXT_NODE(3)
4) Node.CDATA_SECTION_NODE(4)
5) Node.ENTITY_REFERENCE_NODE(5)
6) Node.ENTITY_NODE(6)
7) Node.PROCESSING_INSTRUCTION_NODE(7)
8) Node.COMMENT_NODE(8)
9) Node.DOCUMENT_NODE(9)
10) Node.DOCUMENT_TYPE_NODE(10)
11) Node.DOCUMENT_FRAGMENT_NODE(11)
12) Node.NOTATION_NODE(12)
通过比较上面这些常量，可以确定节点的类型，例如：
if (mynode.nodeType == Node.ELEMENT_NODE) {
alert("Node is an element.");
}但是IE没有公开Node类型的构造函数，因此为了兼容，最好使用数字比较，例如：
if (mynode.nodeType == 1) {
alert("Node is an element.");
}要了解节点的具体信息，可以使用nodeName和nodeValue两个属性，它们的值取决于节点的类型。对于元素节点，nodeName中保存的是元素的标签名，而nodeValue为null。
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。虽然可以通过方括号来访问NodeList的值，而这个对象也有length属性，但它并不是Array的实例，例如：
var firstChild = mynode.childNodes[0]; var secondChild = mynode.childNodes.item(1); var count = someNode.childNodes.length;
每个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的每个节点都有同一个父节点，且相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。列表中第一个节点的previousSibling和最后一个节点的nextSibling属性的值都是null。
hasChildNodes()方法在节点包含一或多个子节点时返回true，可以用以检测节点是否包含子节点。所有节点都有一个属性ownerDocument，该属性指向表示整个文档的文档节点，通过这个属性，我们可以不必在节点层次中回溯到达顶端，而是可以直接访问文档节点。
1.3 操作节点
DOM提供了一些操作节点的方法，最常用的是appendChild()，用于向childNodes列表的末尾添加一个节点，更新完成后，appendChild()返回新增的节点，例如：
var returnNode = mynode.appendChild(newNode);
如果传入到appendChild()中的节点已经是文档的一部分，那结果就会将该节点从原位置移到新位置。
如果需要把节点放在 childNodes列表中的某个特定的位置上，而不是末尾，可以使用insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入完成后，insertBefore()返回插入的节点，例如：
var returnNode = mynode.insertBefore(newNode, someNode);
如果参照节点是null，则insertBefore与appendChild()相同。
replaceChild()方法接受两个参数：要插入的节点和要替换的节点。被替换的节点将由这个方法返回并从文档树中被移除，同时要插入的节点占据其位置，例如：
var returnNode = mynode.replaceChild(newNode, someNode);
如果只要移除节点，可以使用removeChild()方法。这个方法接受一个参数，即要移除的节点，同时返回被移除的节点，例如：
var returnNode = mynode.removeChild(someNode);
以上四种方法操作的都是某个节点的子节点，要使用这几个方法必须先取得父节点，如果在不支持子节点的节点上调用这些方法，会导致错误。
有两个方法是所有类型的节点都有的。第一个是cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个布尔值参数，表示是否执行深复制，深复制即复制节点及其整个子节点树。复制后返回的节点副本属于文档，但没有父节点，尾须通过方法将它添加到文档中。
还有一个方法是normalize()，这个方法处理文档树中的文本节点。由于某些原因，文本节点可能不包含文本，或者接连出现两个文本节点。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找这种情况，如果找到空文本节点，则删除它，如果找到相邻的文本节点，则合并它们。
2. Document类型
2.1 Document
JavaScript通过Document类型表示文档。在浏览器上，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。页且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。Document节点具有以下特征：
1) nodeType的值为9。
2) nodeName的值为"#document"。
3) nodeValue的值为null。
4) parentNode的值为null。
DOM标准规定Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment，还有一些内置的访问其子节点的快捷方式。
第一个是documentElement属性，它始终指向HTML页面中的<html>元素。还有一个body属性，指向<body>元素。所有浏览器都支持document.documentELement和document.body属性。
通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体，可以通过doctype属性(document.doctype)来访问它的信息。不同浏览器对doctype的支持差异很大。
作为HTMLDocument的一个实例，document对象还有一些标准的Document对象所没有的属性，这些属性提供了document对象所表现的网页的一些信息。其中第一个属性是title，包含着<title>元素中的文本。还有三个与对网页请求有关的属性：URL、domain和referrer。URL属性中包含页面完整的URL，domain属性只包含页面的域名，而referrer属性中则保存着链接到当前页面的那个页面的URL，在没有来源页面的情况下，referrer属性中可能包含空字符串。
这三个属性中只有domain属性是可设置的，但由安全方面的限制，并非可以给domain设置任何值，如果URL中包含一个子域名，如www.test.com，那么就只能将domain设置为test.com。不能将这个属性设置为URL中不包含的域。浏览器对domain属性还有一个限制，即如果域名一开始是“松散的”，那么不能将它再设置为“紧凑的”。例如将document.domain设置为test.com后，就不能再将其设置回www.test.com，否则会导致错误。
2.2 查找元素
取得元素的操作可以使用document的几个方法来完成，包括getElementById()和getElementsByTagName()等。
getElement()接受一个参数：要取得的元素的ID，如果找到相应元素则返回，否则返回null，例如：
var div = document.getElementById("mydiv");注意ID必须与页面中的元素id属性严格匹配，包括大小写。但IE8及较低版本不区分大小写，如果页面中多个元素的ID值相同，getElementById()只返回文档中第一次出现的元素。IE7中如果表单元素的name属性与给定的ID匹配，也会被该方法返回。
另一个常用于取得元素引用的方法是getElementsByTagName()。这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的集合，例如：
var images = document.getElementsByTagName("img");这个方法会返回一个HTMLCollection对象，该对象与NodeList类似， 可以使用方括号语法或item()方法来访问其中的项，而元素的数量可以通过其length属性取得。HTMLCollection对象还有一个方法：namedItem()，使用这个方法可以通过元素的name属性取得集合中的项，例如：
var myimage = images.namedItem("myImage");在提供按索引访问项的基础上，HTMLCollection还支持按名称访问项，对命名的项也可以使用方括号来访问。要取得所有的元素，可以向getElementsByTagName()中传入“*”。
第三个方法，也是只有HTMLDocument才有的方法，是getElementsByName()。这个方法会返回带有给定name属性的所有元素，例如：
var radios = document.getElementsByName("color");getElementsByName()也会返回一个HTMLCollection对象。
2.3 特殊集合
除了属性和方法，document对象还有一些特殊的集合。这些集合都是HTMLCollection对象，为访问文档常用的部分提供了快捷方式，包括以下：
1) document.anchors: 包含文档中所有带name属性的<a>元素。
2) document.applets: 包含文档中所有的<applet>元素。
3) document.forms: 包含文档中所有的<form>元素。
4) document.images: 包含文档中所有的<img>元素。
5) document.links: 包含文档中所有带href属性的<a>元素。
2.4 一致性检测
由于DOM分为多个级别，因此检测浏览器实现了DOM的哪些部分就十分必要。document.implementation属性就为此提供相应信息和功能。DOM1级只为document.implementation规定了一个方法，即hasFeature()。这个方法接受两个参数：要检测的DOM功能的名称及版本号，如果浏览器支持对应的名称和版本，则返回true，例如：
var hasXMLDom = document.implementation.hasFeature("XML", "1.0");| 功能 | 版本号 | 说明 |
|---|---|---|
| Core | 1.0、2.0、3.0 | 基本的DOM，用于描述表现文档的节点树。 |
| XML | 1.0、2.0、3.0 | Core的XML扩展。 |
| HTML | 1.0、2.0 | XML的HTML扩展。 |
| Views | 2.0 | 基于某些样式完成文档的格式化。 |
| StyleSheets | 2.0 | 将样式表关联到文档。 |
| CSS | 2.0 | 对层叠样式表1级的支持。 |
| CSS2 | 2.0 | 对层叠样式表2级的支持。 |
| Events | 2.0 | 常规的DOM事件。 |
| UIEvents | 2.0 | 用户界面事件。 |
| MouseEvents | 2.0 | 由鼠标引发的事件。 |
| MutationEvents | 2.0 | DOM树变化时引发的事件。 |
| HTMLEvents | 2.0 | HTML4.01事件。 |
| Range | 2.0 | 用于操作DOM树中某个节围的对象和方法。 |
| Traversal | 2.0 | 遍历DOM树的方法。 |
| LS | 3.0 | 文件与DOM树之间的同步加载和保存。 |
| LS-Async | 3.0 | 文件与DOM树之间的异步加载和保存。 |
| Validation | 3.0 | 在确保有效的前提下修改DOM树的方法。 |
2.5 文档写入
document对象拥有将输出流写入到网页中的能力。这个能力体现在4个方法中：write()、writeln()、open()和close()。其中write()和writeln()方法都接受一个字符串参数，即要写入到输出流中的文本。write()会原样写入，而writeln()会在字符串末尾添加一个换行符，例如：
document.write("<strong>" + (new Date()).toString() + "</strong>");此外，还可以使用write()和writeln()方法动态地包含外部资源，但是不能直接包含字符串"</script>"，因为这会导致该字符串被解释为脚本块的结束，所以解决方案：
document.write("<script type=\"text/javascript\" src=\"file.js\"") + "</scr" + "ipt>";如果在文档结束后再调用document.write()，那么在输出的内容将会重写整个页面。
3. Element类型
3.1 Element
除了Document类型之外，Element类型是Web编辑中最常用的类型。Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及属性的访问。Element节点具有以下特征：
1) nodeType的值为1。
2) nodeName的值为元素的标签名。
3) nodeValue的值为null。
4) parentNode可能是Document或Element。
要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性，这两个属性会返回相同的值，例如：
var div = document.getElementById("mydiv");
alert(div.tagName);
alert(div.nodeName);在HTML中，标签名始终以大写表示，而XML中，标签名与源代码中的保持一致，假如不确定自己的脚本会在HTML还是XML中执行，可以在比较之前转换为相同的大小写。
3.2 HTML元素
所有HTML元素都由HTMLElement类型表示。HTMLElement类型直接继承自Element并添加了一些属性：
1) id: 元素在文档中的唯一标识符。
2) title: 有关元素的附加说明信息。
3) lang: 元素内容的语言代码。
4) dir: 语言的方向，值为"ltr"或"rtl"。
5) className: 与元素的class属性对应。
上述这些属性都可以用来取得或修改相应的属性值，例如：
var div = document.getElementById("mydiv");
alert(div.id);
alert(div.className);3.3 取得和设置属性
每个元素都有一或多个属性，操作属性的DOM方法主要有三个：getAttribute()、setAttribute()和removeAttribute()，例如：
var div = document.getElementById("mydiv");
alert(div.getAttribute("id"));
alert(div.getAttribute("class"));注意传递给getAttribute()的属性名与实际的属性名相同，比如class属性值，只有在通过对象属性访问时才使用className。如果给定名称的属性不存在，则返回null。
通过getAttribute()方法也可以取得自定义属性，属性的名称是不区分大小写的。有两类特殊的属性，虽然有属性名，但属性的值与通过getAttribute()返回的值并不相同。第一类是style，在通过getAttribute()访问时，返回的style属性值是CSS文本，而通过属性访问则会返回一个对象。第二类是类似
与getAttribute()对应的方法是setAttribute()，这个方法接受两个参数：要设置的属性名和值，如果属性已经存在，则会以指定的值替换现有的值，如果属性不存在，则创建该属性并设置相应的值，例如：
var div = document.getElementById("mydiv");
div.setAttribute("id", "myid");
div.setAttribute("class", "myclass");通过setAttribute()方法即可以操作HTML属性也可以操作自定义属性。通过这个方法设置的属性名会被统一转换为小写形式。
可以直接给属性赋值，但不包括自定义属性，例如：
var div = document.getElementById("mydiv");
div.id = "myid";
div.class = "myclass";removeAttribute()方法用于彻底删除元素的属性，调用这个方法不仅会清除属性的值，也会从元素中完全删除属性，例如：
var div = document.getElementById("mydiv");
div.removeAttribute("class");3.4 attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap，与NodeList类似，也是一个动态集合。元素中的每一个属性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中，NamedNodeMap有以下方法：
1) getNamedItem(name): 返回nodeName属性等于name的节点。
2) removeNamedItem(name): 从列表中移除nodeName属性等于name的节点。
3) setNamedItem(node): 向列表中添加节点，以节点的nodeName属性为索引。
4) item(pos): 返回位于pos位置处的节点。
attributes属性中包含一系列节点，每个节点的nodeName就是属性的名称，而节点的nodeValue就是属性的值，例如：
var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;调用removeNamedItem()直接删除给定名称的属性，例如：
var oldAttr = element.attributes.removeNamedItem("id");setNamedItem()方法可以为元素添加一个属性，需要传入一个属性节点，例如：
element.attributes.setNamedItem(newAttr);
3.5 创建元素
使用document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML中不区分大小写，而在XML中，则是区分大小写的，例如：
var div = document.createElement("div");在IE中可以用另一个方式使用createElement()，为这个方法传入完整的元素标签，也可以包含属性，例如：
var div = document.createElement("<div id=\"mydiv\"></div>");3.6 元素的子节点
元素可以有任意数目的子节点和后代节点，元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。不同浏览器在对待这些节点方面存在不同。
<ul id="mylist"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
在IE中解析，<ul>元素会有3个子节点，分别是3个<li>元素。但在其他浏览器中，<ul>元素都会有7个元素，包括3个<li>元素和4个文本节点（<li>元素之间的空白）。
元素也支持getElementsByTagName()方法，在通过元素调用这个方法时，除了搜索起点是当前元素，其他与通过document调用这个方法相同。
4. Text类型
4.1 Text
文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。Text节点具有以下特征：
1) nodeType的值为3。
2) nodeName的值为"#Text"。
3) nodeValue的值为节点所包含的文本。
4) parentNode是一个Element。
5) 无子节点。
可以通过nodeValue属性或data属性访问Text节点中包含的文本，这两个属性包含的值相同。使用以下方法可以操作节点中的文本：
1) appendData(text): 将text添加到节点的末尾。
2) deleteData(offset, count): 从offset指定的位置开始删除count个字符。
3) insertData(offset, text): 在offset指定的位置插入text。
4) replaceData(offset, count, text): 用text替换从offset到offset+count处的文本。
5) splitText(offset): 从offset指定的位置将当前文本节点分成两个文本节点。
6) substringData(offset, count): 提取从offset到offset+count处的字符串。
除此之外，Text节点还有一个length属性，保存着节点中字符的数目，等同于nodeValue.length和data.length。
在默认情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须有内容。
4.2 创建文本节点
可以使用document.createTextNode()创建新文本节点，这个方法接受一个参数：要插入节点中的文本，例如：
var textNode = document.createTextNode("Hello World!");一般每个元素只有一个文本节点，但在有些情况下可能包含多个文本节点，容易导致混乱，可以调用normalize()方法将相邻的文本节点合并，这个方法是由Node类型定义的。Text类型的splitText()方法与normalize()相反，这个方法将一个文本节点分成两个文本节点。
5. 其他类型
5.1 Comment类型
注释在DOM中是通过Comment类型表示的，Comment节点具有以下特征：
1) nodeType的值为8。
2) nodeName的值为"#comment"。
3) nodeValue的值是注释的内容。
4) parentNode可能是Document或Element。
5) 没有子节点。
Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()外所有字符串操作方法。与Text类型相似，可以通过nodeValue或data属性来取得注释的内容。
5.2 CDATASection类型
CDATASection类型只针对基于XML的文档，表示的是CDATA区域。与Comment类似，CDATASection类型继承自Text类型，因此拥有除splitText()外所有字符串操作方法。DATASection节点具有以下特征：
1) nodeType的值为4。
2) nodeName的值为"#cdata-section"。
3) nodeValue的值为CDATA区域中的内容。
4) parentNode可能是Document或Element。
5) 没有子节点。
CDATA区域只会出现在XML文档中，多数浏览器会把CDATA区域错误解析为Comment或Element。在XML中，可以使用document.createCDataSection()来创建CDATA区域，只需为其传入节点的内容。
5.3 DocumentType类型
DocumentType类型在Web浏览器中不常用，仅有Firefox、Safari和Opera支持。DocumentType包含着与文档的doctype有关的所有信息，它具有以下特征：
1) nodeType的值为10。
2) nodeName的值为doctype的名称。
3) nodeValue的值为null。
4) parentNode是Document。
5) 没有子节点。
5.4 DocumentFragment类型
在所有节点类型中，只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段是一种“轻量级”文档，可以包含和控制节点，但不会占用额外资源。DocumentFragment节点具有以下特征：
1) nodeType的值为11。
2) nodeName的值为"#document-fragment"。
3) nodeValue的值为null。
4) praentNode的值为null。
5) 子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntiryReference。
5.5 Attr类型
元素的属性在DOM中以Attr类型来表示。属性节点具有以下特征：
1) nodeType的值为11。
2) nodeName的值是属性的名称。
3) nodeValue的值是属性的值。
4) parentNode的值为null。
5) 在HTML中没有子节点。
6) 在XML中子节点可以是Text或EntityReference。
Attr对象有3个属性：name、value和specified。其中，name是属性名称，value是属性的值，specified是一个布尔值，用以区别属性是在代码中指定的，还是默认的。