一、理解包含不同層次節點的DOM
1.節點層次
以下面的HTML爲例：
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
原文地址：點擊打開鏈接
可以將這個簡單的HTML文檔表示爲一個層次結構。
文檔節點是每個文檔的根節點。在這個例子中，文檔節點只有一個子節點<html>元素，我們稱之爲文檔元素。文檔元素是文檔的最外層元素，文檔中的其他元素都包含在文檔元素中。
（1）Node類型
DOM1級定義了一個Node接口，該接口將有DOM中的所有節點類型實現。這個Node接口在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)
①要了解節點的具體信息，可以使用nodeName和nodeValue這兩個屬性。這兩個屬性的值完全取決於節點的類型。對於元素節點，nodeName中保存的始終都是元素的簽名，而nodeValue的值則始終爲null。
②節點關係
每個節點都有一個childNodes屬性，其中保存着一個NodeList對象。NodeList對象是一種類數組對象，用於保存一組有序的節點，可以通過位置來訪問這些節點。
③操作節點
操作節點最常使用的方法就是appendChild（）。
④其他方法
有兩個方法是所有類型的節點都有的。第一個就是cloneNode（），用於創建調用這個方法的節點的一個完全相同的副本。第二個是normalize（）方法。這個方法唯一的用處就是處理文檔樹中的文本節點。
二、Document類型
document節點具有以下特徵：
nodeType的值爲9；
nodeName的值爲“#document”；
nodeValue的值爲null；
parentNode的值爲null；
ownerDocument的值爲null；
其子節點可能是一個DocumentType（最多一個）、Element（最多一個）、ProcessingInstruction或Comment。
1.文檔的子節點
DOM有兩個內置的訪問其子節點的快捷方式。第一個是documentElement屬性，該屬性始終指向HTML頁面中的<html>元素。另一個就是通過childNodes列表訪問文檔元素，但通過documentElement屬性則能更快捷、更直接地訪問該元素。
2.文檔信息
document對象有一些標準的Document對象所沒有的屬性。第一個就是title。包含着<title>元素中的文本——顯示在瀏覽器窗口的標題欄或標籤頁上。
接下來介紹的3個屬性都與對網頁的請求有關，它們是URL、domain和referrer。URL屬性中包含頁面完整的URL，domain屬性中只包含頁面的域名，而referrer屬性中則保存着鏈接到當前頁面的那個頁面的URL。在沒有來源頁面的情況下，referrer屬性中可能會包含空字符串。
URL與domain屬性是互相關聯的。
例如，如果document.URL等於http：//www.wrox.com/WileyCDA/，那麼document.domain就等於www.wrox.com。
在這三個屬性中，只有domain是可以設置的。
3.查找元素
取得元素的操作可以用document對象的幾個方法來完成。其中Document類型爲此提供了兩個方法：getElementById（）和getElementsByTagName（）。
第一個方法接收一個參數：要取得的元素ID。這裏的ID必須與頁面中元素的id嚴格匹配。例如：
<div id = “myDiv”>Some text </div>
可以使用下面代碼取得這個元素：
var div = document.getElementById（”myDiv”）；
第二個方法接受一參數：要取得的元素的標籤名，返回的是包含零或多個元素的NodeList。例如，下面代碼會取得頁面中所有的<img>元素，並返回一個HTMLCollection。
var images = document.getElementsByTagName（”img”）；
第三個方法，只有HTMLDocument類型纔有的方法，是getElementByName（）。這個方法會返回帶有給定name特性的所有元素。最常用getElementsByName（）方法的情況是取得單選按鈕。
4.特殊集合
除了屬性和方法，document對象還有一些特殊的集合。這些集合都是HTMLCollection對象：
document.anchors，包含文檔中所有帶name特性的<a>元素
document.applets，包含文檔中所有<applet>元素，因爲不再推薦使用<applet>元素因此這個集合不再建議使用。
document.forms，包含文檔中所有的<form>元素，與document.getElementByTagName（”form”）得到的結果相同。
document.images，包含文檔中所有的<img>元素，與document.getElementsByTagName（”img”）得到的結果相同。
document.links，包含文檔中所有帶href特性的<a>元素。
5.DOM一致性檢測
document.implementation屬性可以用來檢測瀏覽器實現了哪些部分。這個方法接收兩個參數：要檢測的DOM功能的名稱及版本號。
6.文檔寫入
有一個document對象的功能已經存在很多年了，那就是將輸出流寫入到網頁中的能力。這個能力體系在以下4個方法中：write（）、writeln（）、open（）、close（）。其中，write（）和writeln（）都接受一個字符串參數，即要寫入到輸出流中的文本。write（）會原樣寫入。而writeln（）會在字符串的末尾添加一個換行符（\n）。
三、Element類型
Element類型用於表現XML或HTML元素，提供了對元素標籤名、子節點及特性的訪問。Element節點具有以下特徵：
nodeType的值爲1；
nodeName的值爲元素的標籤名；
nodeValue的值爲null；
parentNode可能是Document或Element；
其子節點可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。要訪問元素的標籤名，可以使用nodeName屬性，也可以使用tagName屬性；這兩個屬性會返回相同的值。
1.html元素
所有的HTML元素都由HTMLElement類型或其子類型表示。每個HTML元素中都存在下列標準特性：
id，元素在文檔中的唯一標識符。
title，有關元素的附加說明信息，一般通過工具提示條顯示出來。
lang，元素內容的語言代碼，很少使用。
dir，語言的方向。值爲”ltr”（left-to-right，從左至右）或”rtl”（right-to-left，從右至左），也很少使用。
className，與元素的class特性相對應，即爲元素指定的CSS類。
2.取得特性
每個元素都由一個或多個特新，這些特性的用途是給出相應元素或其內容的附加信息。操作特性的DOM方法主要有三個，分別是getAttribute（）、setAttribute（）和removeAttribute（）。
3.設置特性
與getAttribute（）對應的方法是setAttribute（），這個方法接收兩個參數：要設置的特性名和值。如果特性已經存在，setAttribute（）會以指定的值替換現有的值；如果特性不存在，setAttribute（）則創建該屬性並設置相應的值。
4.attributes屬性
Element類型是使用attribute屬性的唯一一個DOM節點類型。attribute屬性中包含一個NamedNodeMap，與NodeList類似，也是一個”動態”的集合。元素的每一個特性都由一個attr節點表示，每個節點都保存在NamedNodeMap對象中。NamedNodeMap對象擁有下列方法：
getNamedItem(name)：返回nodeName屬性等於name的節點；
removeNamedItem(name)：從列表中移除nodeName屬性等於name的節點；
setNamedItem(node)：向列表中添加節點，以節點的nodeName屬性爲索引；
item(pos)：返回位於數字pos位置處的節點。
5.創建元素
使用document.createElement（）方法可以創建新元素。這個方法只接受一個參數，即要創建元素的標籤名。不區分大小寫。例如，使用下面的代碼可以創建一個<div>元素。
var div = document.createElement（”div”）；
6.元素的子節點
元素可以有任意數目的子節點和後代節點，因爲元素可以是其他元素的子節點。元素的childNodes屬性中包含了它的所有子節點。
四、Text類型
本節點由Text類型表示，包含的是可以照字面解釋的純文本內容。
1.創建文本節點
可以使用document.createTextNode（）創建新文本節點，這個方法接受一個參數——要插入節點中的文本。例如下面代碼：
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>元素中，這樣就可以在瀏覽器中看到新創建的元素和文本節點了。
2.規範化文本節點
normalize()方法能夠將相鄰文本節點合併。如果在一個包含兩個或多個文本節點的父元素上調用normalize()方法，則會將所有文本節點合併成一個節點，結果節點的nodeValue等於將合併前每個文本節點的nodeValue值拼接起來的值。
3.分割文本節點
Text類型提供了一個作用於normalize()相反的方法：splitText()。這個方法會將一個文本節點分成兩個文本節點，即按照指定的位置分割nodeValue值。原來的文本節點將包含從開始到指定位置之前的內容，新文本節點將包含剩下的文本。
五、Comment類型
Comment類型與Text類型繼承自相同的基類，因此它擁有除splitText()之外的所有字符串操作方法。與Text類型相似，也可以通過nodeValue或data屬性來取得註釋的內容。Comment類型節點具有以下特徵：
nodeType的值爲8；
nodeName的值爲”#comment”；
nodeValue的值是註釋的內容；
parentNode可能是Document或Element；
不支持子節點。
六、CDATASection類型
CDATASection類型只針對基於XML的文檔，表示的是CDATA區域。與Comment類型類似，因此擁有除splitText()之外的所有字符串操作方法。CDATASection類型節點具有以下特徵：
nodeType的值爲4；
nodeName的值爲”#cdata-section”；
nodeValue的值是CDATA區域中的內容；
parentNode可能是Document或Element；
不支持子節點。
七、DocumentType類型
DocumentType類型具有以下特徵：
nodeType的值爲10；
nodeName的值爲doctype的名稱；
nodeValue的值爲null；
parentNode是Document；
不支持子節點。
八、DocumentFragment類型
DocumentFragment類型節點具有以下特徵：
nodeType的值爲11；
nodeName的值爲”#document-fragment”;
nodeValue的值爲null；
parentNode的值爲null；
子節點可以是：Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference。
九、Attr類型
nodeType的值爲2；
nodeName的值是特性的名稱；
nodeValue的值是特性的值；
parentNode的值爲null；
在HTML中不支持子節點；
在XML中子節點可以是Text或EntityReference。
Attr對象有3個屬性：name、value和specified。其中，name是特性名稱，value是特性的值，specified是一個布爾值，用以區別特性是在代碼中指定的還是默認的。
十、DOM操作技術
1.動態腳本
創建動態腳本有兩種方法：插入外部文件和直接插入javascript代碼。
動態加載的外部javascript文件能夠立即運行，比如下面的<script>元素：
<script type = “text/javascript” src=“client.js”></script>
2.動態樣式
所謂動態樣式是指在頁面剛加載時不存在的樣式；動態樣式是在頁面加載完成後動態添加到頁面中的。需要注意的是，必須將<link>元素添加到<head>而不是<body>元素，才能保證在所有瀏覽器中的行爲一致。
加載外部樣式文件的過程是異步的，也就是加載樣式與執行javascript代碼的過程沒有固定的次序。
3.操作表格
使用核心DOM方法創建表格代碼如下：
//創建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//創建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//創建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1 , 1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2 , 1"));
//創建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 2 , 1"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2 , 2"));
//將表格添加到文檔主體中
document.body.appendChild(table);
