一.緒論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.訪問表單控件