一.绪论css
DOM是文档对象模型（Document Object Module）的简称，借助DOM模型，能够将结构化文档，转换成DOM树，程序能够访问，修改，增长，删除树的节点。程序经过操做DOM树时，结构化文档也会随之html
动态改变。java
DOM并非一种技术，它只是访问结构化文档的一种思想，各类语言都有本身的DOM解释器。android
DOM为经常使用的HTML元素提供了一整套的继承体系，从页面的document对象到每一个经常使用的HTML元素，DOM模型都提供了对应的类，每一个类都提供了相应的方法来操做元素自己，属性及其子元素。DOM模型容许ajax
以树的形式操做HTML文档的每个元素。编程
HTML中，Node，Document，Element，HTMLELement都是普通HTML元素的超类，不直接对应于HTML页面的控件。但他们所包含的方法也可被其余页面元素调用。ssh
二.访问HTML元素post
1.根据Id访问HTML元素测试
document.getElementById(idVal):返回文档中Id属性为idVal的HTML元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据Id访问HTML元素</title>
<script type="text/javascript">
var accessById = function(){
alert(document.getElementById("a").innerHTML+"\n"+document.getElementById("b").value);
}
</script>
</head>
<body>
<div id="a">疯狂java讲义</div>
<textarea id="b" cols="30" rows="3">轻量级javaEE企业应用实战</textarea>
<input type="button" value="访问2个元素" onclick="accessById()"/>
</body>
</html>
innerHTML属性：该属性表明该元素的内容。当某个元素的开始标签和结束标签之间都是字符串内容时（不包含其余子元素），JavaScript子元素可经过它的innerHTML属性返回这些字符串内容
value属性：<textarea.../>是一个表单控件，开始标签和结束标签之间的内容都是它的值，只能经过value属性来访问。不只如此，，还有<input.../>元素所生成的表单控件，包括单行文本框，各类按钮等，
它们的可视化文本都有value属性控制，所以经过value属性获取它们的内容。除此以外的HTML元素，包括列表框，下拉菜单的列表项，<label.../>表单域，<button.../>按钮，都应经过innerHTML
来获取它们的内容。
2.根据css选择器访问HTML元素
根据CSS选择器来访问HTML元素由document的以下方法提供
a）Element querySeletor(seletors)：该方法的参数既但是一个CSS选择器，也但是用逗号隔开的多个CSS选择器，该方法返回HTML文档中第一个匹配选择器参数的HTML元素。
下面代码示范了querySeletor()的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据选择器访问HTML元素</title>
<script type="text/javascript">
var accessById = function()
{
alert(document.querySelector("#a").innerHTML+"\n"+document.querySelector("#b").value);
}
</script>
</head>
<body>
<div id="a">疯狂java讲义</div>
<textarea id="b" cols="30" rows="3">轻量级javaEE企业应用实战</textarea>
<input type="button" value="访问2个元素" onclick="accessById()"/>
</body>
</html>
b）NodeList querySeletorALl(seletors)：该方法与前一个方法的用法相似，只是该方法将返回全部符合CSS选择器的HTML元素 。
下面代码示范了querySeletorAll()的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据选择器访问HTML元素</title>
<script type="text/javascript">
var change = function()
{
var divList = document.querySelectorAll("div");
alert(divList);
for(var i in divList)
{
divList[i].innerHTML = "测试内容"+ i;
divList[i].style.width = '300px';
divList[i].style.height = '50px';
divList[i].style.margin = '10px';
divList[i].style.backgroundColor = '#faa';
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<input type="button" onclick="change();" value="修改所有div元素"/>
</body>
</html>
3.利用节点关系访问HTML元素
一旦获取了某个HTML元素，因为该元素实际上与DOM树的某个节点对应，所以能够利用节点之间的父子、兄弟关系来访问HTML元素。
利用节点关系访问HTML元素的方法以下：
Node parentNode：返回当前节点的父节点。只读属性。
Node previousSibling：返回当前节点的前一个兄弟节点，只读属性。
Node nextSibling：返回当前节点的后一个兄弟节点，只读属性。
Node[] childNodes：返回当前节点的全部子节点，只读属性。
Node[] getElementByTagName(tagName)：返回当前节点的具备指定标签名的全部子节点。
Node firstChild：返回当前节点的第一个子节点，只读属性
Node lastChild：返回当前节点的最后一个子节点，只读属性。
下面页面代码示范了如何利用节点关系访问HTML元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据节点关系访问HTML元素</title>
<style type="text/css">
.selected{
background-color: #66f;
}
</style>
</head>
<body>
<ol id="books">
<li id="java">疯狂Java讲义</li>
<li id="ssh">轻量级JavaEE企业应用实战</li>
<li id="ajax" class="selected">疯狂Ajax讲义</li>
<li id="xml">疯狂xml讲义</li>
<li id="ejb">经典JavaEE企业应用实战</li>
<li id="android">疯狂Android讲义</li>
</ol>
<input type="button" value="父节点" onclick="change(curTarget.parentNode);"/>
<input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
<input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling);"/>
<input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling);"/>
<input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
<script type="text/javascript">
var curTarget = document.getElementById("ajax");
var change = function(target)
{
alert(target.innerHTML);
}
</script>
</body>
</html>
4.访问表单控件