前言：
通过javascript可以重构整个HTML文档，可以添加、移除、改变、或重排页面上的项目。要改变页面上的某个部分，javascript就需要对HTML文档中所有元素设置进行访问的接口。通过这个接口，可以提供对HTML元素进行添加、移动、改变、或移除的方法和属性，这些都是由文档对象模型（DOM）来实现。简单点说，HTML文档代表的是页面，而DOM则代表了如何去操作页面。
1、DOM树的结构
DOM节点树中的节点有元素节点、文本节点、和属性节点等三种不同的类型。
2、document对象
document对象代表一个浏览器窗口或框架中显示的HTML文件。浏览器在加载HTML文档时，为每个HTML文档创建document对象，document对象是window对象的一个属性。document对象有大量的属性和方法。
最常用的函数如下：
document.write():动态的向页面写入内容。
document.createElement(Tag):创建一个html标签对象。
document.getElementById(ID):获得指定ID值的对象。
document.getElementByName(Name):获取指定name值的对象。
Example a :
var mainContent = document.getElementById("main");
//alert(mainContent);
mainContent.style.backgroundColor = "#FF0000";
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length;i++)
{
paragraphs[i].style.fontSize = "2em";
}
var elements = document.getElementsByTagName("body")[0].childNodes;
for (var i = 0; i < elements.length;i++)
{
alert(elements[i].nodeType);
}
HTML文档：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>DOM</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/Demo.js"></script>
</head>
<body>
<div id="main">
<p class="intro">Welcom to my web sit</p>
<p>We sell all the widgets you need</p>
</div>
<div id="footer">
Copyright 2015 Example Corp,Inc
</div>
<input type="button" onclick="" value="执行" />
</body>
</html>
注：childNodes属性返回节点的子节点集合，以Nodelist对象（换行为文本节点）。
Document对象还有下面几个比较常用的方法和属性：
open():打开一个流，以收集来自任何document.write()或document.writeln()的方法的输出。
close():关闭document.open打开的输出流，并显示选定的数据。
write():向文档写HTML代码或javascript代码。
writeln():等同于write()方法，不同的是在每个表达式之后写一个换行符。
title:该属性可以引用和设置页面中title标记的内容。
Example b:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>DOM</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function Greeting()
{
var NewWin = window.open();
var name = document.getElementById("name");
//alert(name.value)
with(NewWin.document)
{
open();
write("<h1>新的页面</h1>");
close();
}
}
</script>
</head>
<body>
输入你的姓名：<input type="text" id="name"/>
<button onclick="Greeting()">Greeting</button>
</body>
</html>
3、获取DOM中的元素
DOM中定义了多个获取元素节点的方法，如getElementById()、getElementsByName()和getElementsbyTagName()。如果需要获取文档中某一特定的元素节点，最有效的方法是getElementById()。
3.1、getElementById()：该方法是通过元素节点的ID来准确的获取元素节点。
Example:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>DOM</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function gGetValue()
{
var x = document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="gGetValue()">这是标题</h1>
<p>点击标题，会提示出它的值</p>
</body>
</html>
3.2 getElementsByName():根据Name属性来获取元素节点，得到的是一个元素节点数组。
example:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>DOM</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function GetElements()
{
var x = document.getElementsByName("MyInput");
alert(x.length);
}
</script>
</head>
<body>
<input name="MyInput" type="text" size="20"/> <br />
<input name="MyInput" type="text" size="20"/> <br />
<input name="MyInput" type="text" size="20"/> <br />
<input type="button" onclick="GetElements()" value="名为myInput的元素有多少个？" />
</body>
</html>
注：getElementById()能够与GetElementsByName()结合起来用：document.getElementById("a").GetElementsByName("b")意思就是获取Id为a元素节点的子节点中Name属性为b的所有元素节点，以数组的形式表示。
3.3 getElementsByTagName():通过元素的标签名获取节点，同样该方法返回的也是一个数组。