HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML元素之间的继承关系
DOM为常用的HTML元素提供了一套完整的继承体系，从页面的document对象到每个常用的HTML元素，DOM模型都提供了对应的类，每个类都提供了相应的方法来操作DOM元素本身、属性和其子元素。DOM模型允许以树的方式操作HTML文档中的每个元素。其中，Node，Document，Element，HTMLElement都是普通HTML元素的超类，不直接对应于HTML页面控制，但他们包含的方法可以被其他页面元素调用。
Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问（window常省略）。Document对象中的属性或方法可以用Document.xxx的方式访问或调用。
Element对象
在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。Element对象中的属性或方法可以用element.xxx的方式访问或调用（element代指元素节点对象，示例如下增加元素的示例）。
查找 HTML 元素
查找html元素有三种方法：
1.通过id 找到 HTML 元素
例：var x=document.getElementById(“intro”);
如果找到该元素，则该方法将以对象的形式返回该元素。
如果未找到该元素，则 x 将包含 null。
2.通过类名找到 HTML 元素（通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。）
使用方法getElementsByClassName（），该方法返回文档中所有指定类名的元素的集合。
3.通过标签名找到 HTML 元素
使用方法getElementsByTagName（），该方法返回文档中所有带指定标签名的元素的集合。
（注：上面用到的三个方法都是Document对象中的方法。）
三个方法的示例：
<p class="pclass" id="pid">测试</p>
<button onclick="idGet()">通过id获取</button>
<button onclick="classGet()">通过类名获取</button>
<button onclick="tagNameGet()">通过标签获取</button>
<script type="text/javascript">
function idGet(){
document.getElementById("pid").innerHTML="通过id获取";
}
function classGet(){
document.getElementsByClassName("pclass")[0].innerHTML = "通过类名获取";
}
function tagNameGet(){
document.getElementsByTagName('p')[0].innerHTML = "通过标签名获取";
}
</script>
4.通过节点关系找到HTML元素
element对象中通过节点关系访问HTML元素的属性如下（这些属性可用于所有元素上）：
parentNode //返回当前节点的父节点，顶级父级元素为document；
childNodes //返回当前节点的所有子节点
firstChild //返回当前节点的第一个子节点
lastChild //返回当前节点的最后一个子节点
nextSibling //返回当前节点的后一个兄弟节点
previousSiling //返回当前节点的前一个兄弟节点
5.通过css选择器找到HTML元素
使用document提供的如下方法：
querySelector（selecs）:该方法参数可以是一个或多个逗号隔开的css选择器，返回文档中第一个符合选择器参数的HATML元素。
querySelectorAll（selecs）：返回所有符合css选择器的HTML元素
改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。语法：
document.getElementById(id).innerHTML=new HTML
改变 HTML 属性
语法：
document.getElementById(id).attribute=new value
改变 HTML 样式
语法：
document.getElementById(id).style.property=new style
注意：改变HTML样式是通过改变Style对象的属性完成，部分写法和css属性相似却略有区别。
增加HTML元素
向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素（调用element对象的appendChild（）方法，方法参数传入要添加的元素节点对象）。
示例：
//创建一个新<p>元素节点
var para=document.createElement("p");
//向p元素中添加文本内容
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
//获取一个已存在的元素
var element=document.getElementById("div1");
//向这个已存在的元素追加前面创建的<p>元素
element.appendChild(para);
删除HTML元素
删除元素需要获取目标元素的父元素，再调用父元素的removeChild（）方法（element对象中的方法），方法参数传入要删除的元素节点对象。
示例：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>