Element 型別
除了 Document 型別之外，Element 型別就要算是 Web 程式設計中最常用的型別了。Element 型別用於表現 XML 或 HTML 元素，提供了對元素標籤名、子節點及特性的訪問。Element 節點具有以下特徵：
nodeType的值為1；nodeName的值為元素的標籤名；nodeValue的值為null；parentNode可能是Document或Element；- 其子節點可能是
Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。
要訪問元素的標籤名，可以使用 nodeName 屬性，也可以使用 tagName 屬性；這兩個屬性會返回相同的值（使用後者主要是為了清晰起見）。以下面的元素為例：
複製程式碼可以像下面這樣取得這個元素及其標籤名：
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元素為例：
複製程式碼元素中指定的所有資訊，都可以通過下列 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 語言中沒有的特性）的值，以下面的元素為例：
複製程式碼這個元素包含一個名為 my_special_attribute 的自定義特性，它的值是 "hello!"。可以像取得其他特性一樣取得這個值，如下所示：
var value = div.getAttribute("my_special_attribute");複製程式碼不過，特性的名稱是不區分大小寫的，即 "ID" 和 "id" 代表的都是同一個特性。另外也要注意，根據 HTML5 規範，自定義特性應該加上 data- 字首以便驗證。
任何元素的所有特性，也都可以通過 DOM 元素本身的屬性來訪問。當然，HTMLElement 也會有5個屬性與相應的特性一一對應。不過，只有公認的（非自定義的）特性才會以屬性的形式新增到 DOM 物件中。以下面的元素為例：
複製程式碼因為 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() 方法。下面的程式碼會把新建立的元素新增到文件的 元素中。
document.body.appendChild(div);複製程式碼一旦將元素新增到文件樹中，瀏覽器就會立即呈現該元素。此後，對這個元素所作的任何修改都會實時反映在瀏覽器中。
元素的子節點
元素可以有任意數目的子節點和後代節點，因為元素可以是其他元素的子節點。元素的 childNodes 屬性中包含了它的所有子節點，這些子節點有可能是元素、文字節點、註釋或處理指令。不同瀏覽器在看待這些節點方面存在顯著的不同，以下面的程式碼為例。
Item 1
Item 2
Item 3
複製程式碼 如果是 IE8 來解析這些程式碼，那麼 元素。但如果是在其他瀏覽器中， 元素和4個文字節點（表示 元素之間的空白符）。如果像下面這樣將元素間的空白符刪除，那麼所有瀏覽器都會返回相同數目的子節點。
Item 1 Item 2 Item 3複製程式碼 對於這段程式碼，childNodes 屬性遍歷子節點，那麼一定不要忘記瀏覽器間的這一差別。這意味著在執行某項操作以前，通常都要先檢查一下 nodeTpye 屬性，如下面的例子所示。
for (var i=0, len=element.childNodes.length; i < len; i++){
if (element.childNodes[i].nodeType == 1){
//執行某些操作
}
}複製程式碼這個例子會迴圈遍歷特定元素的每一個子節點，然後只在子節點的 nodeType 等於1（表示是元素節點）的情況下，才會執行某些操作。
如果想通過某個特定的標籤名取得子節點或後代節點該怎麼辦呢？實際上，元素也支援 getElementsByTagName() 方法。在通過元素呼叫這個方法時，除了搜尋起點是當前元素之外，其他方面都跟通過 document 呼叫這個方法相同，因此結果只會返回當前元素的後代。例如，要想取得前面 元素，可以使用下列程式碼。
var ul = document.getElementById("myList");
var items = ul.getElementsByTagName("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 中也儲存著同樣的值。
在預設情況下，每個可以包含內容的元素最多隻能有一個文字節點，而且必須確實有內容存在。來看幾個例子。
Hello World!複製程式碼上面程式碼給出的第一個 元素沒有內容，因此也就不存在文字節點。開始與結束標籤之間只要存在內容，就會建立一個文字節點。因此，第二個 元素中雖然只包含一個空格，但仍然有一個文字子節點；文字節點的 nodeValue 值是一個空格。第三個 div 也有一個文字節點，其 nodeValue 的值為 "Hello World!"。可以使用以下程式碼來訪問這些文字子節點。
var textNode = div.firstChild; // 或者div.childNodes[0]複製程式碼在取得了文字節點的引用後，就可以像下面這樣來修改它了。
div.firstChild.nodeValue = "Some other message";複製程式碼如果這個文字節點當前存在於文件樹中，那麼修改文字節點的結果就會立即得到反映。另外，在修改文字節點時還要注意，此時的字串會經過 HTML（或XML，取決於文件型別）編碼。換句話說，小於號、大於號或引號都會像下面的例子一樣被轉義。
// 輸出結果是"Some other message"
div.firstChild.nodeValue = "Some other message";複製程式碼應該說，這是在向 DOM 文件中插入文字之前，先對其進行 HTML 編碼的一種有效方式。
在 IE8、Firefox、Safari、Chrome 和 Opera中，可以通過指令碼訪問
Text型別的建構函式和原型。
建立文字節點
可以使用 document.createTextNode() 建立新文字節點，這個方法接受一個引數——要插入節點中的文字。與設定已有文字節點的值一樣，作為引數的文字也將按照 HTML 或 XML 的格式進行編碼。
var textNode = document.createTextNode("Hello world!");複製程式碼在建立新文字節點的同時，也會為其設定 ownerDocument 屬性。不過，除非把新節點新增到文件樹中已經存在的節點中，否則我們不會在瀏覽器視窗中看到新節點。下面的程式碼會建立一個 元素並向其中新增一條訊息。
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);複製程式碼這個例子建立了一個新 元素併為它指定了值為 "message" 的 class 特性。然後，又建立了一個文字節點，並將其新增到前面建立的元素中。最後一步，就是將這個元素新增到了文件的 元素中，這樣就可以在瀏覽器中看到新建立的元素和文字節點了。
一般情況下，每個元素只有一個文字子節點。不過，在某些情況下也可能包含多個文字子節點，如下面的例子所示。
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 屬性來取得註釋的內容。
註釋節點可以通過其父節點來訪問，以下面的程式碼為例。
複製程式碼在此，註釋節點是 元素的一個子節點，因此可以通過下面的程式碼來訪問它。
var div = document.getElementById("myDiv");
var comment = div.firstChild;
console.log(comment.data); // "A comment"複製程式碼另外，使用 document.createComment() 併為其傳遞註釋文字也可以建立註釋節點，如下面的例子所示。
var comment = document.createComment("A comment ");複製程式碼顯然，開發人員很少會建立和訪問註釋節點，因為註釋節點對演算法鮮有影響。此外，瀏覽器也不會識別位於 標籤後面的註釋。如果要訪問註釋節點，一定要保證它們位於 和 之間。
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 的某些部分要比處理其他部分更復雜一些。
動態指令碼
使用
建立這個 DOM 節點的程式碼如下所示：
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}複製程式碼下面是呼叫這個函式的示例：
loadScript("client.js");複製程式碼另一種指定 JavaScript 程式碼的方式是行內方式，如下面的例子所示：
function sayHi(){
alert("hi");
}
複製程式碼從邏輯上講，下面操作的 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 將
var d = document.getElementById("t");
document.writeln(d.firstChild.innerHTML); // ???
document.writeln(d.lastChild.innerHTML); // ???
aaa
bbb
ccc
var d = document.getElementById("t");
document.writeln(d.childNodes[1].innerHTML); // ???
document.writeln(d.parentNode.getAttribute("name")); // ???
複製程式碼
aaa
bbb
ccc
var d = document.getElementById("t").childNodes[1];
document.writeln(d.nextSibling.innerHTML); // ???
document.writeln(d.previousSibling.innerHTML); // ???
複製程式碼
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")); // ???
複製程式碼更多
關注微信公眾號「劼哥舍」回覆「答案」，獲取關卡詳解。
關注 github.com/stone0090/j…，獲取最新動態。