一、理解包含不同层次节点的DOM
1.节点层次
以下面的HTML为例：
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
可以将这个简单的HTML文档表示为一个层次结构。
文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点<html>元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他元素都包含在文档元素中。
（1）Node类型
DOM1级定义了一个Node接口，该接口将有DOM中的所有节点类型实现。这个Node接口在javascript中是作为Node类型实现的。每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一：
Node.ELEMENT_NODE(1) ;
Node.ATTRIBUTE_NODE(2) ;
Node.TEXT_NODE(3) ;
Node.CDATA_SECTION_NODE(4) ;
Node.ENTITY_REFERENCE_NODE(5) ;
Node.ENTITY_NODE(6) ;
Node.PROCESSING_INSTRUCTION_NODE(7) ;
Node.COMMENT_NODE(8) ;
Node.DOCUMENT_NODE(9) ;
Node.DOCUMENT_TYPE_NODE(10) ;
Node.DOCUMENT_FRAGMENT_NODE(11) ;
Node.NOTATION_NODE(12)
①要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。对于元素节点，nodeName中保存的始终都是元素的签名，而nodeValue的值则始终为null。
②节点关系
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList对象是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
③操作节点
操作节点最常使用的方法就是appendChild（）。
④其他方法
有两个方法是所有类型的节点都有的。第一个就是cloneNode（），用于创建调用这个方法的节点的一个完全相同的副本。第二个是normalize（）方法。这个方法唯一的用处就是处理文档树中的文本节点。
二、Document类型
document节点具有以下特征：
nodeType的值为9；
nodeName的值为“#document”；
nodeValue的值为null；
parentNode的值为null；
ownerDocument的值为null；
其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。
1.文档的子节点
DOM有两个内置的访问其子节点的快捷方式。第一个是documentElement属性，该属性始终指向HTML页面中的<html>元素。另一个就是通过childNodes列表访问文档元素，但通过documentElement属性则能更快捷、更直接地访问该元素。
2.文档信息
document对象有一些标准的Document对象所没有的属性。第一个就是title。包含着<title>元素中的文本——显示在浏览器窗口的标题栏或标签页上。
接下来介绍的3个属性都与对网页的请求有关，它们是URL、domain和referrer。URL属性中包含页面完整的URL，domain属性中只包含页面的域名，而referrer属性中则保存着链接到当前页面的那个页面的URL。在没有来源页面的情况下，referrer属性中可能会包含空字符串。
URL与domain属性是互相关联的。
例如，如果document.URL等于http：//www.wrox.com/WileyCDA/，那么document.domain就等于www.wrox.com。
在这三个属性中，只有domain是可以设置的。
3.查找元素
取得元素的操作可以用document对象的几个方法来完成。其中Document类型为此提供了两个方法：getElementById（）和getElementsByTagName（）。
第一个方法接收一个参数：要取得的元素ID。这里的ID必须与页面中元素的id严格匹配。例如：
<div id = “myDiv”>Some text </div>
可以使用下面代码取得这个元素：
var div = document.getElementById（”myDiv”）；
第二个方法接受一参数：要取得的元素的标签名，返回的是包含零或多个元素的NodeList。例如，下面代码会取得页面中所有的<img>元素，并返回一个HTMLCollection。
var images = document.getElementsByTagName（”img”）；
第三个方法，只有HTMLDocument类型才有的方法，是getElementByName（）。这个方法会返回带有给定name特性的所有元素。最常用getElementsByName（）方法的情况是取得单选按钮。
4.特殊集合
除了属性和方法，document对象还有一些特殊的集合。这些集合都是HTMLCollection对象：
document.anchors，包含文档中所有带name特性的<a>元素
document.applets，包含文档中所有<applet>元素，因为不再推荐使用<applet>元素因此这个集合不再建议使用。
document.forms，包含文档中所有的<form>元素，与document.getElementByTagName（”form”）得到的结果相同。
document.images，包含文档中所有的<img>元素，与document.getElementsByTagName（”img”）得到的结果相同。
document.links，包含文档中所有带href特性的<a>元素。
5.DOM一致性检测
document.implementation属性可以用来检测浏览器实现了哪些部分。这个方法接收两个参数：要检测的DOM功能的名称及版本号。
6.文档写入
有一个document对象的功能已经存在很多年了，那就是将输出流写入到网页中的能力。这个能力体系在以下4个方法中：write（）、writeln（）、open（）、close（）。其中，write（）和writeln（）都接受一个字符串参数，即要写入到输出流中的文本。write（）会原样写入。而writeln（）会在字符串的末尾添加一个换行符（\n）。
三、Element类型
Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。Element节点具有以下特征：
nodeType的值为1；
nodeName的值为元素的标签名；
nodeValue的值为null；
parentNode可能是Document或Element；
其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；这两个属性会返回相同的值。
1.html元素
所有的HTML元素都由HTMLElement类型或其子类型表示。每个HTML元素中都存在下列标准特性：
id，元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
lang，元素内容的语言代码，很少使用。
dir，语言的方向。值为”ltr”（left-to-right，从左至右）或”rtl”（right-to-left，从右至左），也很少使用。
className，与元素的class特性相对应，即为元素指定的CSS类。
2.取得特性
每个元素都由一个或多个特新，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有三个，分别是getAttribute（）、setAttribute（）和removeAttribute（）。
3.设置特性
与getAttribute（）对应的方法是setAttribute（），这个方法接收两个参数：要设置的特性名和值。如果特性已经存在，setAttribute（）会以指定的值替换现有的值；如果特性不存在，setAttribute（）则创建该属性并设置相应的值。
4.attributes属性
Element类型是使用attribute属性的唯一一个DOM节点类型。attribute属性中包含一个NamedNodeMap，与NodeList类似，也是一个”动态”的集合。元素的每一个特性都由一个attr节点表示，每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法：
getNamedItem(name)：返回nodeName属性等于name的节点；
removeNamedItem(name)：从列表中移除nodeName属性等于name的节点；
setNamedItem(node)：向列表中添加节点，以节点的nodeName属性为索引；
item(pos)：返回位于数字pos位置处的节点。
5.创建元素
使用document.createElement（）方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。不区分大小写。例如，使用下面的代码可以创建一个<div>元素。
var div = document.createElement（”div”）；
6.元素的子节点
元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点。
四、Text类型
本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。
1.创建文本节点
可以使用document.createTextNode（）创建新文本节点，这个方法接受一个参数——要插入节点中的文本。例如下面代码：
var element = document.createElement（”div”）;
element.className = “message” ;
var textNode = document.createTextNode（”Hello world!”）;
element.appendChild（textNode）;
document.body.appendChild（element）;
这个例子创建了一个新<div>元素并为它指定了值为”message”的class特性。然后又创建了一个文本节点，并将其添加到前面创建的元素中。最后一步，就是将这个元素添加到了文档的<body>元素中，这样就可以在浏览器中看到新创建的元素和文本节点了。
2.规范化文本节点
normalize()方法能够将相邻文本节点合并。如果在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点，结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值。
3.分割文本节点
Text类型提供了一个作用于normalize()相反的方法：splitText()。这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。
五、Comment类型
Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法。与Text类型相似，也可以通过nodeValue或data属性来取得注释的内容。Comment类型节点具有以下特征：
nodeType的值为8；
nodeName的值为”#comment”；
nodeValue的值是注释的内容；
parentNode可能是Document或Element；
不支持子节点。
六、CDATASection类型
CDATASection类型只针对基于XML的文档，表示的是CDATA区域。与Comment类型类似，因此拥有除splitText()之外的所有字符串操作方法。CDATASection类型节点具有以下特征：
nodeType的值为4；
nodeName的值为”#cdata-section”；
nodeValue的值是CDATA区域中的内容；
parentNode可能是Document或Element；
不支持子节点。
七、DocumentType类型
DocumentType类型具有以下特征：
nodeType的值为10；
nodeName的值为doctype的名称；
nodeValue的值为null；
parentNode是Document；
不支持子节点。
八、DocumentFragment类型
DocumentFragment类型节点具有以下特征：
nodeType的值为11；
nodeName的值为”#document-fragment”;
nodeValue的值为null；
parentNode的值为null；
子节点可以是：Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference。
九、Attr类型
nodeType的值为2；
nodeName的值是特性的名称；
nodeValue的值是特性的值；
parentNode的值为null；
在HTML中不支持子节点；
在XML中子节点可以是Text或EntityReference。
Attr对象有3个属性：name、value和specified。其中，name是特性名称，value是特性的值，specified是一个布尔值，用以区别特性是在代码中指定的还是默认的。
十、DOM操作技术
1.动态脚本
创建动态脚本有两种方法：插入外部文件和直接插入javascript代码。
动态加载的外部javascript文件能够立即运行，比如下面的<script>元素：
<script type = “text/javascript” src=“client.js”></script>
2.动态样式
所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中的。需要注意的是，必须将<link>元素添加到<head>而不是<body>元素，才能保证在所有浏览器中的行为一致。
加载外部样式文件的过程是异步的，也就是加载样式与执行javascript代码的过程没有固定的次序。
3.操作表格
使用核心DOM方法创建表格代码如下：
//创建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1 , 1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2 , 1"));
//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 2 , 1"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2 , 2"));
//将表格添加到文档主体中
document.body.appendChild(table);