[TOC]
DOM（文檔對象模型）是針對 HTML 和 XML 文檔的一個 API。DOM 描繪了一個層次化的節點樹，允許開發人員添加、移除和修改頁面的某一部分。
## 節點層次
DOM 可以將任何 HTML 或 XML 文檔描繪成一個由多層節點構成的結構。節點分為幾種不同的類型，每種類型分別表示文檔中不同的信息及（或）標記。每個節點都擁有各自的特點、數據和方法，另外也與其他節點存在某種關系。節點之間的關系構成了層次，而所有頁面標記則表現為一個以特定節點為根節點的樹形結構。以下面的 HTML 為例：
```
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
```
可以將這個簡單的 HTML 文檔表示為一個層次結構，如圖下圖所示。
在這個例子中，文檔元素是文檔的最外層元素，文檔中的其他所有元素都包含在文檔元素中。每個文檔只能有一個文檔元素。
每一段標記都可以通過樹中的一個節點來表示：HTML 元素通過元素節點表示，特性（attribute）通過特性節點表示，文檔類型通過文檔類型節點表示，而注釋則通過注釋節點表示。總共有12種節點類型，這些類型都繼承自一個基類型。
Node 類型
DOM1 級定義了一個 Node 接口，該接口將由 DOM 中的所有節點類型實現。這個 Node 接口在 JavaScript 中是作為 Node 類型實現的；除了 IE 之外，在其他所有瀏覽器中都可以訪問到這個類型。JavaScript 中的所有節點類型都繼承自 Node 類型，因此所有節點類型都共享著相同的基本屬性和方法。
每個節點都有一個 nodeType 屬性，用于表明節點的類型。節點類型由在 Node 類型中定義的下列12個數值常量來表示，任何節點類型必居其一：
- Node.ELEMENT_NODE(1)；
- Node.ATTRIBUTE_NODE(2)；
- Node.TEXT_NODE(3)；
- Node.CDATA_SECTION_NODE(4)；
- Node.ENTITY_REFERENCE_NODE(5)；
- Node.ENTITY_NODE(6)；
- Node.PROCESSING_INSTRUCTION_NODE(7)；
- Node.COMMENT_NODE(8)；
- Node.DOCUMENT_NODE(9)；
- Node.DOCUMENT_TYPE_NODE(10)；
- Node.DOCUMENT_FRAGMENT_NODE(11)；
- Node.NOTATION_NODE(12)。
通過比較上面這些常量，可以很容易地確定節點的類型，例如：
```
if (someNode.nodeType == Node.ELEMENT_NODE){ // 在IE中無效
console.log("Node is an element.");
}
```
這個例子比較了 someNode.nodeType 與 Node.ELEMENT_NODE 常量。如果二者相等，則意味著 someNode 確實是一個元素。然而，由于 IE 沒有公開 Node 類型的構造函數，因此上面的代碼在 IE 中會導致錯誤。為了確保跨瀏覽器兼容，最好還是將 nodeType 屬性與數字值進行比較，如下所示：
```
if (someNode.nodeType == 1){ // 適用于所有瀏覽器
console.log("Node is an element.");
}
```
并不是所有節點類型都受到 Web 瀏覽器的支持。開發人員最常用的就是元素和文本節點。
### Node 屬性概述
Node 常用屬性主要有以下10個，接下來我們會著重講解部分屬性。
- nodeType：顯示節點的類型
- nodeName：顯示節點的名稱
- nodeValue：顯示節點的值
- attributes：獲取一個屬性節點
- firstChild：表示某一節點的第一個節點
- lastChild：表示某一節點的最后一個子節點
- childNodes：表示所在節點的所有子節點
- parentNode：表示所在節點的父節點
- nextSibling：緊挨著當前節點的下一個節點
- previousSibling：緊挨著當前節點的上一個節點
### nodeName 和 nodeValue 屬性
要了解節點的具體信息，可以使用 nodeName 和 nodeValue 這兩個屬性。這兩個屬性的值完全取決于節點的類型。在使用這兩個值以前，最好是像下面這樣先檢測一下節點的類型。
```
if (someNode.nodeType == 1){
value = someNode.nodeName; // nodeName的值是元素的標簽名
}
```
在這個例子中，首先檢查節點類型，看它是不是一個元素。如果是，則取得并保存 nodeName 的值。對于元素節點，nodeName 中保存的始終都是元素的標簽名，而 nodeValue 的值則始終為 null。
## 節點關系
文檔中所有的節點之間都存在這樣或那樣的關系。節點間的各種關系可以用傳統的家族關系來描述，相當于把文檔樹比喻成家譜。
每個節點都有一個 childNodes 屬性，其中保存著一個 NodeList 對象。NodeList 是一種類數組對象，用于保存一組有序的節點，可以通過位置來訪問這些節點。請注意，雖然可以通過方括號語法來訪問 NodeList 的值，而且這個對象也有 length 屬性，但它并不是 Array 的實例。NodeList 對象的獨特之處在于，它實際上是基于 DOM 結構動態執行查詢的結果，因此 DOM 結構的變化能夠自動反映在 NodeList 對象中。
下面的例子展示了如何訪問保存在 NodeList 中的節點——可以通過方括號，也可以使用 item() 方法。
```
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;
```
無論使用方括號還是使用 item() 方法都沒有問題，但使用方括號語法看起來與訪問數組相似，因此頗受一些開發人員的青睞。另外，要注意 length 屬性表示的是訪問 NodeList 的那一刻，其中包含的節點數量。
每個節點都有一個 parentNode 屬性，該屬性指向文檔樹中的父節點。包含在 childNodes 列表中的所有節點都具有相同的父節點，因此它們的 parentNode 屬性都指向同一個節點。此外，包含在 childNodes 列表中的每個節點相互之間都是同胞節點。通過使用列表中每個節點的 previousSibling 和 nextSibling 屬性，可以訪問同一列表中的其他節點。列表中第一個節點的 previousSibling 屬性值為 null，而列表中最后一個節點的 nextSibling 屬性的值同樣也為 null，如下面的例子所示：
```
if (someNode.nextSibling === null){
console.log("Last node in the parent’s childNodes list.");
} else if (someNode.previousSibling === null){
console.log("First node in the parent’s childNodes list.");
}
```
當然，如果列表中只有一個節點，那么該節點的 nextSibling 和 previousSibling 都為 null。
父節點與其第一個和最后一個子節點之間也存在特殊關系。父節點的 firstChild 和 lastChild 屬性分別指向其 childNodes 列表中的第一個和最后一個節點。其中，someNode.firstChild 的值始終等于 someNode.childNodes[0]，而 someNode.lastChild 的值始終等于 someNode.childNodes [someNode.childNodes.length-1]。在只有一個子節點的情況下， firstChild 和 lastChild 指向同一個節點。如果沒有子節點，那么 firstChild 和 lastChild 的值均為 null。明確這些關系能夠對我們查找和訪問文檔結構中的節點提供極大的便利。下圖形象地展示了上述關系。
在反映這些關系的所有屬性當中，childNodes 屬性與其他屬性相比更方便一些，因為只須使用簡單的關系指針，就可以通過它訪問文檔樹中的任何節點。另外，hasChildNodes() 也是一個非常有用的方法，這個方法在節點包含一或多個子節點的情況下返回 true；應該說，這是比查詢 childNodes 列表的 length 屬性更簡單的方法。
所有節點都有的最后一個屬性是 ownerDocument，該屬性指向表示整個文檔的文檔節點。這種關系表示的是任何節點都屬于它所在的文檔，任何節點都不能同時存在于兩個或更多個文檔中。通過這個屬性，我們可以不必在節點層次中通過層層回溯到達頂端，而是可以直接訪問文檔節點。
## 操作節點
因為關系指針都是只讀的，所以 DOM 提供了一些操作節點的方法。其中，最常用的方法是 appendChild()，用于向 childNodes 列表的末尾添加一個節點。添加節點后，childNodes 的新增節點、父節點及以前的最后一個子節點的關系指針都會相應地得到更新。更新完成后，appendChild() 返回新增的節點。來看下面的例子：
```
var returnedNode = someNode.appendChild(newNode);
console.log(returnedNode == newNode); // true
console.log(someNode.lastChild == newNode); // true
```
如果傳入到 appendChild() 中的節點已經是文檔的一部分了，那結果就是將該節點從原來的位置轉移到新位置。即使可以將 DOM 樹看成是由一系列指針連接起來的，但任何 DOM 節點也不能同時出現在文檔中的多個位置上。因此，如果在調用 appendChild() 時傳入了父節點的第一個子節點，那么該節點就會成為父節點的最后一個子節點，如下面的例子所示。
```
// someNode 有多個子節點
var returnedNode = someNode.appendChild(someNode.firstChild);
console.log(returnedNode == someNode.firstChild); // false
console.log(returnedNode == someNode.lastChild); // true
```
如果需要把節點放在 childNodes 列表中某個特定的位置上，而不是放在末尾，那么可以使用 insertBefore() 方法。這個方法接受兩個參數：要插入的節點和作為參照的節點。插入節點后，被插入的節點會變成參照節點的前一個同胞節點 previousSibling，同時被方法返回。如果參照節點是 null，則 insertBefore() 與 appendChild() 執行相同的操作，如下面的例子所示。
```
// 插入后成為最后一個子節點
returnedNode = someNode.insertBefore(newNode, null);
console.log(newNode == someNode.lastChild); // true
// 插入后成為第一個子節點
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
console.log(returnedNode == newNode); // true
console.log(newNode == someNode.firstChild); // true
// 插入到最后一個子節點前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
console.log(newNode == someNode.childNodes[someNode.childNodes.length-2]); // true
```
前面介紹的 appendChild() 和 insertBefore() 方法都只插入節點，不會移除節點。而下面要介紹的 replaceChild() 方法接受的兩個參數是：要插入的節點和要替換的節點。要替換的節點將由這個方法返回并從文檔樹中被移除，同時由要插入的節點占據其位置。來看下面的例子。
```
// 替換第一個子節點
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
// 替換最后一個子節點
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);
```
在使用 replaceChild() 插入一個節點時，該節點的所有關系指針都會從被它替換的節點復制過來。盡管從技術上講，被替換的節點仍然還在文檔中，但它在文檔中已經沒有了自己的位置。
如果只想移除而非替換節點，可以使用 removeChild() 方法。這個方法接受一個參數，即要移除的節點。被移除的節點將成為方法的返回值，如下面的例子所示。
```
// 移除第一個子節點
var formerFirstChild = someNode.removeChild(someNode.firstChild);
// 移除最后一個子節點
var formerLastChild = someNode.removeChild(someNode.lastChild);
```
與使用 replaceChild() 方法一樣，通過 removeChild() 移除的節點仍然為文檔所有，只不過在文檔中已經沒有了自己的位置。
前面介紹的四個方法操作的都是某個節點的子節點，也就是說，要使用這幾個方法必須先取得父節點（使用 parentNode 屬性）。另外，并不是所有類型的節點都有子節點，如果在不支持子節點的節點上調用了這些方法，將會導致錯誤發生。
## Document 類型
JavaScript 通過 Document 類型表示文檔。在瀏覽器中，document 對象是 HTMLDocument（繼承自 Document 類型）的一個實例，表示整個 HTML 頁面。而且，document 對象是 window 對象的一個屬性，因此可以將其作為全局對象來訪問。Document 節點具有下列特征：
- nodeType 的值為9；
- nodeName 的值為 "#document"；
- nodeValue 的值為 null；
- parentNode 的值為 null；
- ownerDocument 的值為 null；
- 其子節點可能是一個 DocumentType（最多一個）、Element（最多一個）、ProcessingInstruction 或 Comment。
Document 類型可以表示 HTML 頁面或者其他基于 XML 的文檔。不過，最常見的應用還是作為 HTMLDocument 實例的 document 對象。通過這個文檔對象，不僅可以取得與頁面有關的信息，而且還能操作頁面的外觀及其底層結構。
### 文檔的子節點
雖然 DOM 標準規定 Document 節點的子節點可以是DocumentType、Element、ProcessingInstruction 或 Comment，但還有兩個內置的訪問其子節點的快捷方式。第一個就是documentElement 屬性，該屬性始終指向 HTML 頁面中的 html 元素。另一個就是通過 childNodes 列表訪問文檔元素，但通過 documentElement 屬性則能更快捷、更直接地訪問該元素。以下面這個簡單的頁面為例。
```
<html>
<body>
</body>
</html>
```
這個頁面在經過瀏覽器解析后，其文檔中只包含一個子節點，即 html 元素。可以通過 documentElement 或 childNodes 列表來訪問這個元素，如下所示。
```
var html = document.documentElement; // 取得對<html>的引用
console.log(html === document.childNodes[0]); // true
console.log(html === document.firstChild); // true
```
這個例子說明，documentElement、firstChild 和 childNodes[0] 的值相同，都指向 `<html>` 元素。
作為 HTMLDocument 的實例，document 對象還有一個 body 屬性，直接指向 `<body>` 元素。因為開發人員經常要使用這個元素，所以 document.body 在 JavaScript 代碼中出現的頻率非常高，其用法如下。
```
var body = document.body; // 取得對<body>的引用
```
所有瀏覽器都支持 document.documentElement 和 document.body 屬性。
Document 另一個可能的子節點是 DocumentType。通常將 <!DOCTYPE> 標簽看成一個與文檔其他部分不同的實體，可以通過 doctype 屬性（在瀏覽器中是 document.doctype ）來訪問它的信息。
```
var doctype = document.doctype; // 取得對<!DOCTYPE>的引用
```
瀏覽器對 document.doctype 的支持差別很大，可以給出如下總結。
- IE8 及之前版本：如果存在文檔類型聲明，會將其錯誤地解釋為一個注釋并把它當作 Comment 節點；而 document.doctype 的值始終為 null。
- IE9+ 及 Firefox：如果存在文檔類型聲明，則將其作為文檔的第一個子節點；document.doctype 是一個 DocumentType 節點，也可以通過 document.firstChild 或 document.childNodes[0] 訪問同一個節點。
- Safari、Chrome 和 Opera：如果存在文檔類型聲明，則將其解析，但不作為文檔的子節點。document.doctype 是一個 DocumentType 節點，但該節點不會出現在 document.childNodes 中。
由于瀏覽器對 document.doctype 的支持不一致，因此這個屬性的用處很有限。
### 文檔信息
作為 HTMLDocument 的一個實例，document 對象還有一些標準的 Document 對象所沒有的屬性。這些屬性提供了 document 對象所表現的網頁的一些信息。其中第一個屬性就是 title，包含著 <title> 元素中的文本——顯示在瀏覽器窗口的標題欄或標簽頁上。通過這個屬性可以取得當前頁面的標題，也可以修改當前頁面的標題并反映在瀏覽器的標題欄中。
```
// 取得文檔標題
var originalTitle = document.title;
// 設置文檔標題
document.title = "New page title";
```
接下來要介紹的3個屬性都與對網頁的請求有關，它們是 URL、domain 和 referrer。URL 屬性中包含頁面完整的 URL（即地址欄中顯示的URL），domain 屬性中只包含頁面的域名，而 referrer 屬性中則保存著鏈接到當前頁面的那個頁面的 URL。在沒有來源頁面的情況下，referrer 屬性中可能會包含空字符串。所有這些信息都存在于請求的 HTTP 頭部，只不過是通過這些屬性讓我們能夠在 JavaScrip 中訪問它們而已，如下面的例子所示。
```
// 取得完整的URL
var url = document.URL;
// 取得域名
var domain = document.domain;
// 取得來源頁面的URL
var referrer = document.referrer;
```
### 查找元素
說到最常見的 DOM 應用，恐怕就要數取得特定的某個或某組元素的引用，然后再執行一些操作了。取得元素的操作可以使用 document 對象的幾個方法來完成。其中，Document 類型為此提供了兩個方法：getElementById() 和 getElementsByTagName()。
第一個方法，getElementById()，接收一個參數：要取得的元素的 ID。如果找到相應的元素則返回該元素，如果不存在帶有相應 ID 的元素，則返回 null。注意，這里的 ID 必須與頁面中元素的 id 特性（attribute）嚴格匹配，包括大小寫。以下面的元素為例。
```
<div id="myDiv">Some text</div>
```
可以使用下面的代碼取得這個元素：
```
var div = document.getElementById("myDiv"); // 取得<div>元素的引用
```
但是，下面的代碼在除 IE7 及更早版本之外的所有瀏覽器中都將返回 null。
```
var div = document.getElementById("mydiv"); // 無效的ID（在IE7及更早版本中可以）
```
IE8 及較低版本不區分 ID 的大小寫，因此 "myDiv" 和 "mydiv" 會被當作相同的元素 ID。如果頁面中多個元素的ID值相同，getElementById() 只返回文檔中第一次出現的元素。
另一個常用于取得元素引用的方法是 getElementsByTagName()。這個方法接受一個參數，即要取得元素的標簽名，而返回的是包含零或多個元素的 NodeList。在HTML文檔中，這個方法會返回一個HTMLCollection 對象，作為一個“動態”集合，該對象與 NodeList非常類似。例如，下列代碼會取得頁面中所有的 <img> 元素，并返回一個 HTMLCollection。
```
var images = document.getElementsByTagName("img");
```
這行代碼會將一個 HTMLCollection 對象保存在 images 變量中。與 NodeList 對象類似，可以使用方括號語法或 item() 方法來訪問 HTMLCollection 對象中的項。而這個對象中元素的數量則可以通過其 length 屬性取得，如下面的例子所示。
```
console.log(images.length); // 輸出圖像的數量
console.log(images[0].src); // 輸出第一個圖像元素的src特性
console.log(images.item(0).src); // 輸出第一個圖像元素的src特性
```
HTMLCollection 對象還有一個方法，叫做 namedItem()，使用這個方法可以通過元素的 name 特性取得集合中的項。例如，假設上面提到的頁面中包含如下 `<img>` 元素：
```
<img src="myimage.gif" name="myImage">
```
那么就可以通過如下方式從 images 變量中取得這個 `<img>` 元素：
```
var myImage = images.namedItem("myImage");
```
在提供按索引訪問項的基礎上，HTMLCollection 還支持按名稱訪問項，這就為我們取得實際想要的元素提供了便利。而且，對命名的項也可以使用方括號語法來訪問，如下所示：
```
var myImage = images["myImage"];
```
對 HTMLCollection 而言，我們可以向方括號中傳入數值或字符串形式的索引值。在后臺，對數值索引就會調用 item()，而對字符串索引就會調用 namedItem()。
要想取得文檔中的所有元素，可以向 getElementsByTagName() 中傳入` "*"`。在 JavaScript 及 CSS 中，星號`（*）`通常表示“全部”。下面看一個例子。
```
var allElements = document.getElementsByTagName("*");
```
僅此一行代碼返回的 HTMLCollection 中，就包含了整個頁面中的所有元素——按照它們出現的先后順序。換句話說，第一項是 `<html>` 元素，第二項是 `<head>` 元素，以此類推。由于 IE 將注釋（Comment）實現為元素（Element），因此在IE中調用 `getElementsByTagName("*") `將會返回所有注釋節點。
第三個方法，也是只有 HTMLDocument 類型才有的方法，是 getElementsByName()。顧名思義，這個方法會返回帶有給定 name 特性的所有元素。最常使用 getElementsByName() 方法的情況是取得單選按鈕；為了確保發送給瀏覽器的值正確無誤，所有單選按鈕必須具有相同的 name 特性，如下面的例子所示。
```
<fieldset>
<legend>Which color do you prefer?</legend>
<ul>
<li><input type="radio" value="red" name="color" id="colorRed">
<label for="colorRed">Red</label></li>
<li><input type="radio" value="green" name="color" id="colorGreen">
<label for="colorGreen">Green</label></li>
<li><input type="radio" value="blue" name="color" id="colorBlue">
<label for="colorBlue">Blue</label></li>
</ul>
</fieldset>
```
如這個例子所示，其中所有單選按鈕的 name 特性值都是 "color"，但它們的 ID 可以不同。ID 的作用在于將 `<label>` 元素應用到每個單選按鈕，而 name 特性則用以確保三個值中只有一個被發送給瀏覽器。這樣，我們就可以使用如下代碼取得所有單選按鈕：
```
var radios = document.getElementsByName("color");
```
與 getElementsByTagName() 類似，getElementsByName() 方法也會返回一個 HTMLCollectioin。但是，對于這里的單選按鈕來說，namedItem() 方法則只會取得第一項（因為每一項的 name 特性都相同）。
### 特殊集合
除了屬性和方法，document 對象還有一些特殊的集合。這些集合都是 HTMLCollection 對象，為訪問文檔常用的部分提供了快捷方式，包括：
- document.anchors，包含文檔中所有帶 name 特性的 `<a>` 元素；
- document.applets，包含文檔中所有的 `<applet> `元素，因為不再推薦使用 `<applet>` 元素，所以這個集合已經不建議使用了；
- document.forms，包含文檔中所有的 `<form>` 元素，與document.getElementsByTagName("form")得到的結果相同；
- document.images，包含文檔中所有的 `<img>` 元素，與document.getElementsByTagName("img")得到的結果相同；
- document.links，包含文檔中所有帶href特性的 `<a>` 元素。
這個特殊集合始終都可以通過 HTMLDocument 對象訪問到，而且，與 HTMLCollection 對象類似，集合中的項也會隨著當前文檔內容的更新而更新。
### 文檔寫入
有一個 document 對象的功能已經存在很多年了，那就是將輸出流寫入到網頁中的能力。這個能力體現在下列4個方法中：write()、writeln()、open() 和 close()。其中，write() 和 writeln() 方法都接受一個字符串參數，即要寫入到輸出流中的文本。write() 會原樣寫入，而 writeln() 則會在字符串的末尾添加一個換行符 n。在頁面被加載的過程中，可以使用這兩個方法向頁面中動態地加入內容，如下面的例子所示。
```
<html>
<head>
<title>document.write() Example</title>
</head>
<body>
<p>The current date and time is:
<script type="text/javascript">
document.write("<strong>" + (new Date()).toString() + "</strong>");
</script>
</p>
</body>
</html>
```
這個例子展示了在頁面加載過程中輸出當前日期和時間的代碼。其中，日期被包含在一個 `<strong>` 元素中，就像在 HTML 頁面中包含普通的文本一樣。這樣做會創建一個 DOM 元素，而且可以在將來訪問該元素。通過 write() 和 writeln() 輸出的任何 HTML 代碼都將如此處理。
此外，還可以使用 write() 和 writeln() 方法動態地包含外部資源，例如 JavaScript 文件等。在包含 JavaScript 文件時，必須注意不能像下面的例子那樣直接包含字符串 "</script>"，因為這會導致該字符串被解釋為腳本塊的結束，它后面的代碼將無法執行。
```
<html>
<head>
<title>document.write() Example 2</title>
</head>
<body>
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\"file.js\">" +
"</script>");
</script>
</body>
</html>
```
即使這個文件看起來沒錯，但字符串 "`</script>`" 將被解釋為與外部的 `<script>` 標簽匹配，結果文本 ")；將會出現在頁面中。為避免這個問題，只需把這個字符串分開寫即可；第2章也曾經提及這個問題，解決方案如下。
```
<html>
<head>
<title>document.write() Example 3</title>
</head>
<body>
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\"file.js\">" +
"<\/script>");
</script>
</body>
</html>
```
字符串 `"</script>"` 不會被當作外部 <script> 標簽的關閉標簽，因而頁面中也就不會出現多余的內容了。
前面的例子使用 document.write() 在頁面被呈現的過程中直接向其中輸出了內容。如果在文檔加載結束后再調用 document.write()，那么輸出的內容將會重寫整個頁面，如下面的例子所示：
```
<html>
<head>
<title>document.write() Example 4</title>
</head>
<body>
<p>This is some content that you won't get to see because it will be overwritten.</p>
<script type="text/javascript">
window.onload = function(){
document.write("Hello world!");
};
</script>
</body>
</html>
```
在這個例子中，我們使用了 window.onload 事件處理程序，等到頁面完全加載之后延遲執行函數。函數執行之后，字符串 "Hello world!" 會重寫整個頁面內容。
方法 open() 和 close() 分別用于打開和關閉網頁的輸出流。如果是在頁面加載期間使用 write() 或 writeln() 方法，則不需要用到這兩個方法。
## 關卡
仔細想想，下面代碼塊會輸出什么結果呢？
```
<!-- 挑戰一 -->
<body>
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t");
document.writeln(d.firstChild.innerHTML); // ???
document.writeln(d.lastChild.innerHTML); // ???
</script>
<!-- 挑戰二 -->
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t");
document.writeln(d.childNodes[1].innerHTML); // ???
document.writeln(d.parentNode.getAttribute("name")); // ???
</script>
<!-- 挑戰三 -->
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").childNodes[1];
document.writeln(d.nextSibling.innerHTML); // ???
document.writeln(d.previousSibling.innerHTML); // ???
</script>
```
## Element 類型
除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現 XML 或 HTML 元素，提供了對元素標簽名、子節點及特性的訪問。Element 節點具有以下特征：
- nodeType 的值為1；
- nodeName 的值為元素的標簽名；
- nodeValue 的值為 null；
- parentNode 可能是 Document 或 Element；
其子節點可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference。
要訪問元素的標簽名，可以使用 nodeName 屬性，也可以使用 tagName 屬性；這兩個屬性會返回相同的值（使用后者主要是為了清晰起見）。以下面的元素為例：
```
<div id="myDiv"></div>
```
可以像下面這樣取得這個元素及其標簽名：
```
var div = document.getElementById("myDiv");
console.log(div.tagName); // "DIV"
console.log(div.tagName === div.nodeName); // true
```
這里的元素標簽名是 div，它擁有一個值為 "myDiv" 的ID。可是，div.tagName 實際上輸出的是 "DIV" 而非 "div"。在HTML中，標簽名始終都以全部大寫表示；而在 XML（有時候也包括 XHTML）中，標簽名則始終會與源代碼中的保持一致。假如你不確定自己的腳本將會在 HTML 還是 XML 文檔中執行，最好是在比較之前將標簽名轉換為相同的大小寫形式，如下面的例子所示：
```
// 不能這樣比較，很容易出錯！
if (element.tagName == "div"){
//在此執行某些操作
}
// 這樣最好（適用于任何文檔）
if (element.tagName.toLowerCase() == "div"){
//在此執行某些操作
}
```
### HTML 元素
所有 HTML 元素都由 HTMLElement 類型表示，不是直接通過這個類型，也是通過它的子類型來表示。HTMLElement 類型直接繼承自 Element 并添加了一些屬性。添加的這些屬性分別對應于每個 HTML 元素中都存在的下列標準特性。
- id，元素在文檔中的唯一標識符。
- title，有關元素的附加說明信息，一般通過工具提示條顯示出來。
- lang，元素內容的語言代碼，很少使用。
- dir，語言的方向，值為 "ltr"（left-to-right，從左至右）或 "rtl"（right-to-left，從右至左），也很少使用。
- className，與元素的 class 特性對應，即為元素指定的 CSS 類。沒有將這個屬性命名為 class，是因為 class 是 JavaScript 的保留字。
上述這些屬性都可以用來取得或修改相應的特性值。以下面的HTML元素為例：
```
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>
```
元素中指定的所有信息，都可以通過下列 JavaScript 代碼取得：
```
var div = document.getElementById("myDiv");
console.log(div.id); // "myDiv""
console.log(div.className); // "bd"
console.log(div.title); // "Body text"
console.log(div.lang); // "en"
console.log(div.dir); // "ltr"
```
當然，像下面這樣通過為每個屬性賦予新的值，也可以修改對應的每個特性：
```
div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";
```
并不是對所有屬性的修改都會在頁面中直觀地表現出來。對 id 或 lang 的修改對用戶而言是透明不可見的（假設沒有基于它們的值設置的 CSS 樣式），而對 title 的修改則只會在鼠標移動到這個元素之上時才會顯示出來。對 dir 的修改會在屬性被重寫的那一刻，立即影響頁面中文本的左、右對齊方式。修改 className 時，如果新類關聯了與此前不同的 CSS 樣式，那么就會立即應用新的樣式。
### 取得特性
每個元素都有一或多個特性，這些特性的用途是給出相應元素或其內容的附加信息。操作特性的 DOM 方法主要有三個，分別是 getAttribute()、setAttribute() 和 removeAttribute()。這三個方法可以針對任何特性使用，包括那些以 HTMLElement 類型屬性的形式定義的特性。來看下面的例子：
```
var div = document.getElementById("myDiv");
console.log(div.getAttribute("id")); // "myDiv"
console.log(div.getAttribute("class")); // "bd"
console.log(div.getAttribute("title")); // "Body text"
console.log(div.getAttribute("lang")); // "en"
console.log(div.getAttribute("dir")); // "ltr"
```
注意，傳遞給 getAttribute() 的特性名與實際的特性名相同。因此要想得到 class 特性值，應該傳入 "class" 而不是 "className"，后者只有在通過對象屬性訪問特性時才用。如果給定名稱的特性不存在，getAttribute() 返回 null。
通過 getAttribute() 方法也可以取得自定義特性（即標準 HTML 語言中沒有的特性）的值，以下面的元素為例：
```
<div id="myDiv" my_special_attribute="hello!"></div>
```
這個元素包含一個名為 my_special_attribute 的自定義特性，它的值是 "hello!"。可以像取得其他特性一樣取得這個值，如下所示：
```
var value = div.getAttribute("my_special_attribute");
```
不過，特性的名稱是不區分大小寫的，即 "ID" 和 "id" 代表的都是同一個特性。另外也要注意，根據 HTML5 規范，自定義特性應該加上 data- 前綴以便驗證。
任何元素的所有特性，也都可以通過 DOM 元素本身的屬性來訪問。當然，HTMLElement 也會有5個屬性與相應的特性一一對應。不過，只有公認的（非自定義的）特性才會以屬性的形式添加到 DOM 對象中。以下面的元素為例：
```
<div id="myDiv" align="left" my_special_attribute="hello!"></div>
```
因為 id 和 align 在 HTML 中是 div 的公認特性，因此該元素的 DOM 對象中也將存在對應的屬性。不過，自定義特性 my_special_attribute 在 Safari、Opera、Chrome 及 Firefox 中是不存在的；但 IE 卻會為自定義特性也創建屬性，如下面的例子所示：
```
console.log(div.id); // "myDiv"
console.log(div.my_special_attribute); // undefined（IE除外）
console.log(div.align); // "left"
```
有兩類特殊的特性，它們雖然有對應的屬性名，但屬性的值與通過 getAttribute() 返回的值并不相同。第一類特性就是 style，用于通過 CSS 為元素指定樣式。在通過 getAttribute() 訪問時，返回的 style 特性值中包含的是CSS文本，而通過屬性來訪問它則會返回一個對象。由于 style 屬性是用于以編程方式訪問元素樣式的，因此并沒有直接映射到 style 特性。
第二類與眾不同的特性是 onclick 這樣的事件處理程序。當在元素上使用時，onclick 特性中包含的是 JavaScript 代碼，如果通過 getAttribute() 訪問，則會返回相應代碼的字符串。而在訪問 onclick 屬性時，則會返回一個 JavaScript 函數（如果未在元素中指定相應特性，則返回 null）。這是因為 onclick 及其他事件處理程序屬性本身就應該被賦予函數值。
由于存在這些差別，在通過 JavaScript 以編程方式操作 DOM 時，開發人員經常不使用 getAttribute()，而是只使用對象的屬性。只有在取得自定義特性值的情況下，才會使用 getAttribute() 方法。
### 設置特性
與 getAttribute() 對應的方法是 setAttribute()，這個方法接受兩個參數：要設置的特性名和值。如果特性已經存在，setAttribute() 會以指定的值替換現有的值；如果特性不存在，setAttribute() 則創建該屬性并設置相應的值。來看下面的例子：
```
div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");
```
通過 setAttribute() 方法既可以操作HTML特性也可以操作自定義特性。通過這個方法設置的特性名會被統一轉換為小寫形式，即 "ID" 最終會變成 "id"。
因為所有特性都是屬性，所以直接給屬性賦值可以設置特性的值，如下所示。
```
div.id = "someOtherId";
div.align = "left";
```
不過，像下面這樣為 DOM 元素添加一個自定義的屬性，該屬性不會自動成為元素的特性。
```
div.mycolor = "red";
console.log(div.mycolor); // "red"
console.log(div.getAttribute("mycolor")); // null（IE除外）
```
這個例子添加了一個名為 mycolor 的屬性并將它的值設置為 "red"。在大多數瀏覽器中，這個屬性都不會自動變成元素的特性，因此想通過 getAttribute() 取得同名特性的值，結果會返回 null。可是，自定義屬性在 IE 中會被當作元素的特性，反之亦然。
要介紹的最后一個方法是 removeAttribute()，這個方法用于徹底刪除元素的特性。調用這個方法不僅會清除特性的值，而且也會從元素中完全刪除特性，如下所示：
div.removeAttribute("class");
這個方法并不常用，但在序列化 DOM 元素時，可以通過它來確切地指定要包含哪些特性。
### 創建元素
使用 document.createElement() 方法可以創建新元素。這個方法只接受一個參數，即要創建元素的標簽名。這個標簽名在 HTML 文檔中不區分大小寫。例如，使用下面的代碼可以創建一個 div 元素。
```
var div = document.createElement("div");
```
在使用 createElement() 方法創建新元素的同時，也為新元素設置了 ownerDocuemnt 屬性。此時，還可以操作元素的特性，為它添加更多子節點，以及執行其他操作。來看下面的例子。
```
div.id = "myNewDiv";
div.className = "box";
```
在新元素上設置這些特性只是給它們賦予了相應的信息。由于新元素尚未被添加到文檔樹中，因此設置這些特性不會影響瀏覽器的顯示。要把新元素添加到文檔樹，可以使用 appendChild()、insertBefore() 或 replaceChild() 方法。下面的代碼會把新創建的元素添加到文檔的 `<body>` 元素中。
```
document.body.appendChild(div);
```
一旦將元素添加到文檔樹中，瀏覽器就會立即呈現該元素。此后，對這個元素所作的任何修改都會實時反映在瀏覽器中。
### 元素的子節點
元素可以有任意數目的子節點和后代節點，因為元素可以是其他元素的子節點。元素的 childNodes 屬性中包含了它的所有子節點，這些子節點有可能是元素、文本節點、注釋或處理指令。不同瀏覽器在看待這些節點方面存在顯著的不同，以下面的代碼為例。
```
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
如果是 IE8 來解析這些代碼，那么 `<ul>` 元素會有3個子節點，分別是3個 `<li>` 元素。但如果是在其他瀏覽器中，`<ul>` 元素都會有7個元素，包括3個 `<li>` 元素和4個文本節點（表示 `<li>` 元素之間的空白符）。如果像下面這樣將元素間的空白符刪除，那么所有瀏覽器都會返回相同數目的子節點。
```
<ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
```
對于這段代碼，`<ul>` 元素在任何瀏覽器中都會包含3個子節點。如果需要通過 childNodes 屬性遍歷子節點，那么一定不要忘記瀏覽器間的這一差別。這意味著在執行某項操作以前，通常都要先檢查一下 nodeTpye 屬性，如下面的例子所示。
```
for (var i=0, len=element.childNodes.length; i < len; i++){
if (element.childNodes[i].nodeType == 1){
//執行某些操作
}
}
```
這個例子會循環遍歷特定元素的每一個子節點，然后只在子節點的 nodeType 等于1（表示是元素節點）的情況下，才會執行某些操作。
如果想通過某個特定的標簽名取得子節點或后代節點該怎么辦呢？實際上，元素也支持 getElementsByTagName() 方法。在通過元素調用這個方法時，除了搜索起點是當前元素之外，其他方面都跟通過 document 調用這個方法相同，因此結果只會返回當前元素的后代。例如，要想取得前面 `<ul>` 元素中包含的所有 `<li>` 元素，可以使用下列代碼。
```
var ul = document.getElementById("myList");
var items = ul.getElementsByTagName("li");
```
要注意的是，這里 <ul> 的后代中只包含直接子元素。不過，如果它包含更多層次的后代元素，那么各個層次中包含的 <li> 元素也都會返回。
## Text 類型
文本節點由 Text 類型表示，包含的是可以照字面解釋的純文本內容。純文本中可以包含轉義后的 HTML 字符，但不能包含 HTML 代碼。Text 節點具有以下特征：
- nodeType 的值為3；
- nodeName 的值為 "#text"；
- nodeValue 的值為節點所包含的文本；
- parentNode 是一個 Element；
- 不支持（沒有）子節點。
可以通過 nodeValue 屬性或 data 屬性訪問 Text 節點中包含的文本，這兩個屬性中包含的值相同。對 nodeValue 的修改也會通過 data 反映出來，反之亦然。使用下列方法可以操作節點中的文本。
- appendData(*text*)：將 *text* 添加到節點的末尾。
- deleteData(*offset*, *count*)：從 *offset* 指定的位置開始刪除 *count* 個字符。
- insertData(*offset, text*)：在 *offset* 指定的位置插入 *text*。
- replaceData(*offset, count, text*)：用 *text* 替換從 *offset* 指定的位置開始到 *offset*+*count* 為止處的文本。
- splitText(*offset*)：從 *offset* 指定的位置將當前文本節點分成兩個文本節點。
- substringData(*offset, count*)：提取從 *offset* 指定的位置開始到 *offset+count* 為止處的字符串。
除了這些方法之外，文本節點還有一個 length 屬性，保存著節點中字符的數目。而且，nodeValue.length 和 data.length 中也保存著同樣的值。
在默認情況下，每個可以包含內容的元素最多只能有一個文本節點，而且必須確實有內容存在。來看幾個例子。
```
<!-- 沒有內容，也就沒有文本節點 -->
<div></div>
<!-- 有空格，因而有一個文本節點 -->
<div> </div>
<!-- 有內容，因而有一個文本節點 -->
<div>Hello World!</div>
```
上面代碼給出的第一個 `<div>` 元素沒有內容，因此也就不存在文本節點。開始與結束標簽之間只要存在內容，就會創建一個文本節點。因此，第二個 `<div>` 元素中雖然只包含一個空格，但仍然有一個文本子節點；文本節點的 nodeValue 值是一個空格。第三個 div 也有一個文本節點，其 nodeValue 的值為 "Hello World!"。可以使用以下代碼來訪問這些文本子節點。
```
var textNode = div.firstChild; // 或者div.childNodes[0]
```
在取得了文本節點的引用后，就可以像下面這樣來修改它了。
```
div.firstChild.nodeValue = "Some other message";
```
如果這個文本節點當前存在于文檔樹中，那么修改文本節點的結果就會立即得到反映。另外，在修改文本節點時還要注意，此時的字符串會經過 HTML（或XML，取決于文檔類型）編碼。換句話說，小于號、大于號或引號都會像下面的例子一樣被轉義。
```
// 輸出結果是"Some <strong>other</strong> message"
div.firstChild.nodeValue = "Some <strong>other</strong> message";
```
應該說，這是在向 DOM 文檔中插入文本之前，先對其進行 HTML 編碼的一種有效方式。
在 IE8、Firefox、Safari、Chrome 和 Opera中，可以通過腳本訪問 Text 類型的構造函數和原型。
創建文本節點
可以使用 document.createTextNode() 創建新文本節點，這個方法接受一個參數——要插入節點中的文本。與設置已有文本節點的值一樣，作為參數的文本也將按照 HTML 或 XML 的格式進行編碼。
```
var textNode = document.createTextNode("<strong>Hello</strong> world!");
```
在創建新文本節點的同時，也會為其設置 ownerDocument 屬性。不過，除非把新節點添加到文檔樹中已經存在的節點中，否則我們不會在瀏覽器窗口中看到新節點。下面的代碼會創建一個 <div> 元素并向其中添加一條消息。
```
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
```
這個例子創建了一個新 <div> 元素并為它指定了值為 "message" 的 class 特性。然后，又創建了一個文本節點，并將其添加到前面創建的元素中。最后一步，就是將這個元素添加到了文檔的 <body> 元素中，這樣就可以在瀏覽器中看到新創建的元素和文本節點了。
一般情況下，每個元素只有一個文本子節點。不過，在某些情況下也可能包含多個文本子節點，如下面的例子所示。
```
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
```
如果兩個文本節點是相鄰的同胞節點，那么這兩個節點中的文本就會連起來顯示，中間不會有空格。
### 規范化文本節點
DOM 文檔中存在相鄰的同胞文本節點很容易導致混亂，因為分不清哪個文本節點表示哪個字符串。另外，DOM 文檔中出現相鄰文本節點的情況也不在少數，于是就催生了一個能夠將相鄰文本節點合并的方法。這個方法是由 Node 類型定義的（因而在所有節點類型中都存在），名叫 normalize()。如果在一個包含兩個或多個文本節點的父元素上調用 normalize() 方法，則會將所有文本節點合并成一個節點，結果節點的 nodeValue 等于將合并前每個文本節點的 nodeValue 值拼接起來的值。來看一個例子。
```
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
console.log(element.childNodes.length); // 2
element.normalize();
console.log(element.childNodes.length); // 1
console.log(element.firstChild.nodeValue); // "Hello world!Yippee!"
```
瀏覽器在解析文檔時永遠不會創建相鄰的文本節點。這種情況只會作為執行DOM操作的結果出現。
### 分割文本節點
Text 類型提供了一個作用與 normalize() 相反的方法 splitText()。這個方法會將一個文本節點分成兩個文本節點，即按照指定的位置分割 nodeValue 值。原來的文本節點將包含從開始到指定位置之前的內容，新文本節點將包含剩下的文本。這個方法會返回一個新文本節點，該節點與原節點的 parentNode 相同。
## Comment 類型
注釋在 DOM 中是通過 Comment 類型來表示的。Comment 節點具有下列特征：
- nodeType 的值為8；
- nodeName 的值為 "#comment"；
- nodeValue 的值是注釋的內容；
- parentNode 可能是 Document 或 Element；
- 不支持（沒有）子節點。
Comment 類型與 Text 類型繼承自相同的基類，因此它擁有除splitText() 之外的所有字符串操作方法。與 Text 類型相似，也可以通過 nodeValue 或 data 屬性來取得注釋的內容。
注釋節點可以通過其父節點來訪問，以下面的代碼為例。
```
<div id="myDiv"><!--A comment --></div>
```
在此，注釋節點是 <div> 元素的一個子節點，因此可以通過下面的代碼來訪問它。
```
var div = document.getElementById("myDiv");
var comment = div.firstChild;
console.log(comment.data); // "A comment"
```
另外，使用 document.createComment() 并為其傳遞注釋文本也可以創建注釋節點，如下面的例子所示。
```
var comment = document.createComment("A comment ");
```
顯然，開發人員很少會創建和訪問注釋節點，因為注釋節點對算法鮮有影響。此外，瀏覽器也不會識別位于 </html> 標簽后面的注釋。如果要訪問注釋節點，一定要保證它們位于 <html> 和 </html> 之間。
## Attr 類型
元素的特性在 DOM 中以 Attr 類型來表示。在所有瀏覽器中（包括 IE8），都可以訪問 Attr 類型的構造函數和原型。從技術角度講，特性就是存在于元素的 attributes 屬性中的節點。特性節點具有下列特征：
- nodeType 的值為11；
- nodeName 的值是特性的名稱；
- nodeValue 的值是特性的值；
- parentNode 的值為 null；
- 在 HTML 中不支持（沒有）子節點；
- 在 XML 中子節點可以是 Text 或 EntityReference。
盡管它們也是節點，但特性卻不被認為是 DOM 文檔樹的一部分。開發人員最常使用的是 getAttribute()、setAttribute() 和 remveAttribute() 方法，很少直接引用特性節點。
Attr 對象有3個屬性：name、value 和 specified。其中，name 是特性名稱（與 nodeName 的值相同），value 是特性的值（與 nodeValue 的值相同），而 specified 是一個布爾值，用以區別特性是在代碼中指定的，還是默認的。
使用 document.createAttribute() 并傳入特性的名稱可以創建新的特性節點。例如，要為元素添加 align 特性，可以使用下列代碼：
```
var attr = document.createAttribute("align");
attr.value = "left";
element.setAttributeNode(attr);
console.log(element.attributes["align"].value); // "left"
console.log(element.getAttributeNode("align").value); // "left"
console.log(element.getAttribute("align")); // "left"
```
添加特性之后，可以通過下列任何方式訪問該特性：attributes 屬性、getAttributeNode() 方法以及 getAttribute() 方法。其中，attributes 和 getAttributeNode() 都會返回對應特性的 Attr 節點，而 getAttribute() 則只返回特性的值。
## DOM 操作
很多時候，DOM 操作都比較簡明，因此用 JavaScript 生成那些通常原本是用 HTML 代碼生成的內容并不麻煩。不過，也有一些時候，操作 DOM 并不像表面上看起來那么簡單。由于瀏覽器中充斥著隱藏的陷阱和不兼容問題，用 JavaScript 代碼處理 DOM 的某些部分要比處理其他部分更復雜一些。
### 動態腳本
使用 `<script>` 元素可以向頁面中插入 JavaScript 代碼，一種方式是通過其 src 特性包含外部文件，另一種方式就是用這個元素本身來包含代碼。而這一節要討論的動態腳本，指的是在頁面加載時不存在，但將來的某一時刻通過修改 DOM 動態添加的腳本。跟操作 HTML 元素一樣，創建動態腳本也有兩種方式：插入外部文件和直接插入 JavaScript 代碼。
動態加載的外部 JavaScript 文件能夠立即運行，比如下面的 `<script>` 元素：
```
<script type="text/javascript" src="client.js"></script>
```
創建這個 DOM 節點的代碼如下所示：
```
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
```
下面是調用這個函數的示例：
```
loadScript("client.js");
```
另一種指定 JavaScript 代碼的方式是行內方式，如下面的例子所示：
```
<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>
```
從邏輯上講，下面操作的 DOM 代碼是有效的：
```
var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));
document.body.appendChild(script);
```
在 Firefox、Safari、Chrome 和 Opera 中，這些 DOM 代碼可以正常運行。但在 IE 中，則會導致錯誤。IE 將 <script> 視為一個特殊的元素，不允許 DOM 訪問其子節點。不過，可以使用 <script> 元素的text 屬性來指定 JavaScript 代碼，像下面的例子這樣：
```
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function sayHi(){alert('hi');}";
document.body.appendChild(script);
```
整個過程可以用以下函數來表示：
```
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code));
} catch (ex){
script.text = code;
}
document.body.appendChild(script);
}
```
下面是調用這個函數的示例：
```
loadScriptString("function sayHi(){alert('hi');}");
```
以這種方式加載的代碼會在全局作用域中執行，而且當腳本執行后將立即可用。實際上，這樣執行代碼與在全局作用域中把相同的字符串傳遞給 eval() 是一樣的。
### 動態樣式
能夠把 CSS 樣式包含到 HTML 頁面中的元素有兩個。其中，`<link>` 元素用于包含來自外部的文件，而 `<style>` 元素用于指定嵌入的樣式。與動態腳本類似，所謂動態樣式是指在頁面剛加載時不存在的樣式；動態樣式是在頁面加載完成后動態添加到頁面中的。
我們以下面這個典型的 `<link>` 元素為例：
```
<link rel="stylesheet" type="text/css" href="styles.css">
```
使用 DOM 代碼可以很容易地動態創建出這個元素：
```
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
```
以上代碼在所有主流瀏覽器中都可以正常運行。需要注意的是，必須將 `<link>` 元素添加到 `<head>` 而不是 `<body>` 元素，才能保證在所有瀏覽器中的行為一致。調用函數的代碼如下所示：
```
loadStyles("styles.css");
```
加載外部樣式文件的過程是異步的，也就是加載樣式的過程沒有固定的次序。一般來說，知不知道樣式已經加載完成并不重要。
另一種定義樣式的方式是使用 `<style>` 元素來包含嵌入式 CSS，如下所示：
```
<style type="text/css">
body { background-color: red; }
</style>
```
按照相同的邏輯，下列 DOM 代碼應該是有效的：
```
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
```
以上代碼可以在 Firefox、Safari、Chrome 和 Opera 中運行，在 IE 中則會報錯。IE將 `<style>` 視為一個特殊的、與 `<script>` 類似的節點，不允許訪問其子節點。事實上，IE 此時拋出的錯誤與向 `<script>` 元素添加子節點時拋出的錯誤相同。解決 IE 中這個問題的辦法，就是訪問元素的 styleSheet 屬性，該屬性又有一個 cssText 屬性，可以接受 CSS 代碼），如下面的例子所示。
```
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
} catch (ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
```
調用這個函數的示例如下：
```
loadStyleString("body{background-color:red}");
```
這種方式會實時地向頁面中添加樣式，因此能夠馬上看到變化。
### 使用 NodeList
理解 NodeList 及其“近親” NamedNodeMap 和 HTMLCollection，是從整體上透徹理解 DOM 的關鍵所在。這三個集合都是“動態的”；換句話說，每當文檔結構發生變化時，它們都會得到更新。因此，它們始終都會保存著最新、最準確的信息。從本質上說，所有 NodeList 對象都是在訪問 DOM 文檔時實時運行的查詢。例如，下列代碼會導致無限循環：
```
var i,div,divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++){
div = document.createElement("div");
document.body.appendChild(div);
}
```
第一行代碼會取得文檔中所有 `<div>` 元素的 HTMLCollection。由于這個集合是“動態的”，因此只要有新 `<div>` 元素被添加到頁面中，這個元素也會被添加到該集合中。瀏覽器不會將創建的所有集合都保存在一個列表中，而是在下一次訪問集合時再更新集合。結果，在遇到上例中所示的循環代碼時，就會導致一個有趣的問題。每次循環都要對條件 i < divs.length 求值，意味著會運行取得所有 `<div>` 元素的查詢。考慮到循環體每次都會創建一個新 `<div>` 元素并將其添加到文檔中，因此 divs.length 的值在每次循環后都會遞增。既然i和 divs.length 每次都會同時遞增，結果它們的值永遠也不會相等。
如果想要迭代一個 NodeList，最好是使用 length 屬性初始化第二個變量，然后將迭代器與該變量進行比較，如下面的例子所示：
```
var i,len,div,divs = document.getElementsByTagName("div");
for (i=0, len=divs.length; i < len; i++){
div = document.createElement("div");
document.body.appendChild(div);
}
```
這個例子中初始化了第二個變量 len。由于 len 中保存著對 divs.length 在循環開始時的一個快照，因此就會避免上一個例子中出現的無限循環問題。在本章演示迭代 NodeList 對象的例子中，使用的都是這種更為保險的方式。
一般來說，應該盡量減少訪問 NodeList 的次數。因為每次訪問 NodeList，都會運行一次基于文檔的查詢。所以，可以考慮將從 NodeList 中取得的值緩存起來。
## 小結
DOM 是語言中立的 API，用于訪問和操作 HTML 和 XML 文檔。DOM1 級將 HTML 和 XML 文檔形象地看作一個層次化的節點樹，可以使用 JavaScript 來操作這個節點樹，進而改變底層文檔的外觀和結構。
DOM 由各種節點構成，簡要總結如下。
最基本的節點類型是 Node，用于抽象地表示文檔中一個獨立的部分；所有其他類型都繼承自 Node。
Document 類型表示整個文檔，是一組分層節點的根節點。在 JavaScript 中，document 對象是 Document 的一個實例。使用 document 對象，有很多種方式可以查詢和取得節點。
Element 節點表示文檔中的所有 HTML 或 XML 元素，可以用來操作這些元素的內容和特性。
另外還有一些節點類型，分別表示文本內容、注釋、文檔類型、CDATA 區域和文檔片段。
訪問 DOM 的操作在多數情況下都很直觀，不過在處理 <script> 和 <style> 元素時還是存在一些復雜性。由于這兩個元素分別包含腳本和樣式信息，因此瀏覽器通常會將它們與其他元素區別對待。這些區別導致了在針對這些元素使用 innerHTML 時，以及在創建新元素時的一些問題。
理解 DOM 的關鍵，就是理解 DOM 對性能的影響。DOM 操作往往是 JavaScript 程序中開銷最大的部分，而因訪問 NodeList 導致的問題為最多。NodeList 對象都是“動態的”，這就意味著每次訪問 NodeList 對象，都會運行一次查詢。有鑒于此，最好的辦法就是盡量減少 DOM 操作。
## 關卡
仔細想想，下面代碼塊會輸出什么結果呢？前3個挑戰相比前一章節，代碼僅僅是多了換行，結果會有什么不一樣呢？
```
<!-- 挑戰一 -->
<body>
<div id = "t">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
</body>
<script>
var d = document.getElementById("t");
document.writeln(d.firstChild.innerHTML); // ???
document.writeln(d.lastChild.innerHTML); // ???
</script>
<!-- 挑戰二 -->
<body name="ddd">
<div id = "t">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
</body>
<script>
var d = document.getElementById("t");
document.writeln(d.childNodes[1].innerHTML); // ???
document.writeln(d.parentNode.getAttribute("name")); // ???
</script>
<!-- 挑戰三 -->
<body name="ddd">
<div id = "t">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
</body>
<script>
var d = document.getElementById("t").childNodes[1];
document.writeln(d.nextSibling.innerHTML); // ???
document.writeln(d.previousSibling.innerHTML); // ???
</script>
<!-- 挑戰四 -->
<body>
<div id="t" class="content" style="background: red;" wife="sophie" onclick="alert('123');"></div>
</body>
<script>
var t = document.getElementById("t");
console.log(t.class); // ???
console.log(t.getAttribute("class")); // ???
console.log(t.className); // ???
console.log(t.getAttribute("className")); // ???
console.log(t.style); // ???
console.log(t.getAttribute("style")); // ???
console.log(t.style.background); // ???
console.log(t.getAttribute("style.background")); // ???
console.log(t.wife); // ???
console.log(t.getAttribute("wife")); // ???
console.log(t.onclick); // ???
console.log(t.getAttribute("onclick")); // ???
</script>
```
