目录
DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。 DOM 脱胎于Netscape 及微软公司创始的 DHTML（动态 HTML）、但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。
节点层次
Node类型
DOM1 级定义了一个 Node 接口，该接口将由 DOM 中的所有节点类型实现。这个 Node 接口在JavaScript 中是作为 Node 类型实现的；除了 IE 之外，在其他所有浏览器中都可以访问到这个类型。JavaScript 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。
Node类型：
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)。
if (someNode.nodeType == Node.ELEMENT_NODE){ //在 IE 中无效
alert("Node is an element.");
}
if (someNode.nodeType == 1){ //适用于所有浏览器
alert("Node is an element.");
}nodeName 和 nodeValue 属性
if (someNode.nodeType == 1){
value = someNode.nodeName; //nodeName 的值是元素的标签名
}节点关系
//childNodes 属性，
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;
//parentNode 属性
if (someNode.nextSibling === null){
alert("Last node in the parent’s childNodes list.");
} else if (someNode.previousSibling === null){
alert("First node in the parent’s childNodes list.");
}
操作节点
var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastChild == newNode); //true
//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true
//插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true
//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true
//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true
//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);
//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);Document类型
JavaScript 通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument（继承自 Document 类型）的一个实例，表示整个 HTML 页面。而且， document 对象是 window 对象的一个属性，因此可以将其作为全局对象来访问。
Document 节点具有下列特征：
nodeType 的值为 9；
nodeName 的值为"#document"；
nodeValue 的值为 null；
parentNode 的值为 null；
ownerDocument 的值为 null；
其子节点可能是一个 DocumentType（最多一个）、 Element（最多一个）、 ProcessingInstruction或 Comment。
文档的子节点
/*
* <html>
* <body>
* </body>
* </html>
*/
var html = document.documentElement; //取得对<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
var body = document.body; //取得对<body>的引用
var doctype = document.doctype; //取得对<!DOCTYPE>的引用文档信息
//取得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = "New page title";
//取得完整的 URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的 URL
var referrer = document.referrer;查找元素
getElementById()
//<div id="myDiv">Some text</div>
var div = document.getElementById("myDiv"); //取得<div>元素的引用getElementsByTagName()
//取得页面中所有的<img>元素，并返回一个 HTMLCollection
var images = document.getElementsByTagName("img");
alert(images.length); //输出图像的数量
alert(images[0].src); //输出第一个图像元素的 src 特性
alert(images.item(0).src); //输出第一个图像元素的 src 特性
var myImage = images.namedItem("myImage");//通过元素的 name特性取得集合中的项
var myImage = images["myImage"];getElementsByName()
var radios = document.getElementsByName("color");特殊集合
document.anchors，包含文档中所有带 name 特性的<a>元素；
document.applets，包含文档中所有的<applet>元素，因为不再推荐使用<applet>元素，所以这个集合已经不建议使用了；
document.forms，包含文档中所有的<form>元素，与 document.getElementsByTagName("form")得到的结果相同；
document.images，包含文档中所有的<img>元素，与 document.getElementsByTagName("img")得到的结果相同； document.links，包含文档中所有带 href 特性的<a>元素。
DOM 一致性检测
var hasXmlDom = document.implementation.hasFeature("XML", "1.0");
文档写入
<!--向页面中动态地加入内容-->
<html>
<head>
<title>document.write() Example</title>
</head>
<body>
<p>The current date and time is:
<script type="text/javascript">
document.write("<strong>" + (new Date()).toString() + "</strong>");
</script>
</p>
</body>
</html>
<!--外部资源，注意转义字符-->
<html>
<head>
<title>document.write() Example 3</title>
</head>
<body>
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\"file.js\">" +
"<\/script>");
</script>
</body>
</html>