## 前言：
?? 文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展置標語言的標準編程接口。它是一種與平臺和語言無關的應用程序接口(API),它可以動態地訪問程序和腳本,更新其內容、結構和www文檔的風格(目前,HTMl和XML文檔是通過說明部分定義的)。
?? 文檔對象模型提供了一種訪問和修改HTML文檔內容的方法。DOM是萬維網聯盟（W3C）定義的一種標準。大部分的互聯網瀏覽器以各種形式實現了DOM并且獲得了不同程度的成功。和其他標準，特別是那些與web編程相關的標準一樣，DOM已經發展了很多年。它有三個規范，即所謂的DOM的級別，第四個規范正在制定中。DOM的強大遠飛我一兩句可以談清楚的。本文簡單的介紹了一下如何使用Javascript訪問和操作DOM。
## 一、獲取元素
?? 使用Javascript編程時，獲取文檔的元素是使用DOM的基本方式。下面將介紹其中兩個用來獲取元素的基本方法：getElementById()和getElementsByTagName()。
### 1、通過ID獲取元素
?? getElementById()方法是DOM中頻繁使用的一個方法。它獲取HTML文檔的一個特定元素并且返回一個對它的引用。為了獲取元素，它必須具有一個ID屬性。
舉例如下：
~~~
<div id="div1">
<p id="p1">
我是第一個P</p>
<p id="p2">
我是第二個P</p>
</div>
window.onload = function () {
var str = document.getElementById("p1").innerHTML;
alert(str); //彈出 我是第一個P
}
~~~
### 2、通過標簽名獲取
?? 當只獲取一個或幾個元素時，getElementById（）方法工作的很好，但是當我需要同時獲取超過一個的元素時，就發現getElementsByTagName()方法更合適。后者是通過數組或者列表的格式返回指定標簽類型的所有元素。
舉例如下：
~~~
<div id="div1">
<p id="p1">
我是第一個P</p>
<p id="p2">
我是第二個P</p>
</div>
window.onload = function () {
var str = document.getElementsByTagName("p")[1].innerHTML;
alert(str); //輸出 我是第二個P，因為獲取的是索引為1的P，索引從0開始
}
window.onload = function () {
var arr = document.getElementsByTagName("p");
for (var i = 0; i < arr.length; i++) {
alert(arr[i].innerHTML);
}
}
window.onload = function () {
var node = document.getElementById("div1");
var node1 = document.getElementsByTagName("p")[1]; //從獲取到的元素再獲取
alert(node1.innerHTML);
}
~~~
## 二、操作屬性
### 1、getAttribute()與setAttribute()
?? getAttribute()是讀取屬性內容，setAttribute()方法對文檔做出的修改，將使得文檔在瀏覽器窗口里的顯示效果和/或行為動作發生相應的變化，但我們在通過瀏覽器的view source（查看源代碼）選項去查看文檔的源代碼時看到的仍將是原來的屬性值——也就是說，setAttribute()方法做出的修改不會反映在文檔本身的源代碼里。這種“表里不一”的現象源自DOM的工作模式：**先加載文檔的靜態內容、再以動態方式對它們進行刷新，動態刷新不影響文檔的靜態內容。**這正是DOM的真正威力和誘人之處：對頁面內容的刷新不需要最終用戶在他們的瀏覽器里執行頁面刷新操作就可以實現。
### 2、舉例
~~~
<head>
<title>Untitled Document</title>
<script language="JavaScript">
function change() {
var input = document.getElementById("li1");
alert(input.getAttribute("title"));
input.setAttribute("title", "mgc");
alert(input.getAttribute("title"));
}
</script>
</head>
<body>
<ul id="u">
<li id="li1" title="hello">Magci</li>
<li>J2EE</li>
<li>Haha!</li>
</ul>
<input type="button" value="Change" onClick="change();" />
</body>
~~~
## 三、創建、刪除、替代、插入節點對象
我們沒有受到與已有元素交互的限制。我們可以使用DOM為文檔添加元素。下面介紹了幾種常用的操作Node對象的方法。
### 1、創建
~~~
<div id="div1">
<p id="p1">我是第一個P</p>
<p id="p2">我是第二個P</p>
</div>
window.onload = function () {
var textNode = document.createTextNode("<p>我是一個javascript新建的節點</p>");
document.getElementById("div1").appendChild(textNode);
}
~~~
### 2、刪除
~~~
<div id="div1">
<p id="p1">我是第一個P</p>
<p id="p2">我是第二個P</p>
</div>
window.onload = function () {
var div1 = document.getElementById("div1");
div1.removeChild(document.getElementById("p2"));
}
~~~
### 3、替代
~~~
<div id="div1">
<p id="p1">我是第一個P</p>
<p id="p2">我是第二個P</p>
</div>
window.onload = function () {
var div1 = document.getElementById("div1");
var span1 = document.createElement("span");
span1.textContent = "我是一個新建的span";
div1.replaceChild(span1,document.getElementById("p2"));
}
~~~
### 4、插入
~~~
<div id="div1">
<p id="p1">我是第一個P</p>
</div>
window.onload = function () {
var pNode1 = document.createElement("p");
pNode1.textContent = "insertBefore插入的節點";
var pNode2 = document.createElement("p");
pNode2.textContent = "appendChild插入的節點";
document.getElementById("div1").appendChild(pNode2);
document.getElementById("div1").insertBefore(pNode1,document.getElementById("p1"));
}
~~~
## 四、小結
??結合前面一個階段學過的XML，XML文檔就是一顆節點樹，樹上所有的節點都是有聯系的。Javascript就是通過DOM來操作XML中的節點。解釋器把XML翻譯成Javascript可訪問的DOM對象，這樣就方便了使用Javascript語言來操作XML文檔。
