DOM（Document Object Model）文档对象模型
——DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。
D——doument（文档）。当创建一个网页并把它加载到web
一、节点层次
文档节点是每个文档的根节点。
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
在这个例子中，文档节点只有一个子节点，即<html>元素——文档元素。文档元素是文档的最外层元素，文档中其他元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML页面中，文档元素始终是<html>。
每段标记都可以通过树中的一个节点表示。
1、Node类型
Javascript中的所有节点类型都继承自Node类型。节点信息属性：nodeName和nodeValue。检测节点类型用nodeType。
1.1、节点关系
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。它是一种类数组对象，保存一组有序的节点，可以通过位置来访问这些节点。
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes[1];
var count = someNode.childNodes.length;
可以将NodeList对象转换为数组。
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
1.2、操作节点
操作节点的方法：appendChild(),用于向childNodes列表的末尾添加一个节点，并返回新增的节点。
若传入到appendChild()中的节点已经是文档的一部分，那结果就是该节点从原来的位置转移到新的位置。
若需要将节点放在childNodes列表中特定的位置，而不是末尾，用insertBefore()，接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。
//插入后成为第一个节点
var returnedNode = someNode.insertBefore(newNode,someNode.firstNode);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstNode); //true
repalceChild()方法，接受参数：要插入的节点和要替换的节点。
removeChild()方法，移除节点。
1.3、其他方法
cloneNode()，用于创建嗲用这个方法的节点的一个完全相同的副本。参数是一个布尔类型的。true：执行深复制，复制节点及其整个子节点树；false：执行浅复制，只复制节点本身。
normalize()，处理文档树中的文本节点。
2、Document类型
document对象表示整个HTML页面。Document节点具有下列特征：
- nodeType值：9；
- nodeName值：“#document”；
- nodeValue：null；
- parentNode：null；
- ownerDocument：null；
- 其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。
2.1 文档子节点
获取文档子节点：
var html = document.documentElement; alert(html == document.childNodes[0]); //true alert(html == document.firstChild); //true
document对象还有一个body属性，直接指向<body>元素。
var body = document.body; //取得对<body>的引用
2.2 文档信息
文档标题：document.title；
URL——包含完整的URL（即地址栏中显示的URL）；document.URL
domain——包含页面的域名；document.domian
referrer——保存着链接到当前页面的那个页面的URL；在没有来源页面的话，该属性中可能保存的是空字符串。document.referrer
这三个属性，只有domain是可以设置的。
2.3 查找元素
两个方法：
getElementById()——接受一个参数：要取得元素的ID
getElementsByTagName()——接收一个参数：要取得元素的标签名
getElementsByName()——返回给定name特性的所有元素
3、Element类型
3.1 HTML元素
<div id="myDiv" class="db" titie="Body text" lang="en" dir="ltr"></div>
访问元素中指定的所有信息：
var div = document.getElementById("myDiv"); alert(div.id); alert(div.className); alert(div.title); alert(div.lang); alert(div.dir);
3.2 取得特性
操作特性的DOM方法：getAttribute(),还可以取得自定义的特性。
setAttribute(),removeAttribute().