記得和上次寫教程隔了好多天了，其中的原因說來慚愧，自己偷懶了，呵呵~
話說上一章說了AJAX和MVC，這章就犯愁了，該寫什麼呢。想來想去，想到了！~~~如題注一樣，這章講DOM技術和JAVASCRIPT。爲什麼說DOM和JAVASCRIPT呢，其實他們和AJAX很有關係的，AJAX具體的實現和他們是離不開的，之後我們會通過實例來說明。
一、DOM深入瞭解
DOM中相關屬性和方法
|
DOM中常用的幾種結點類型 思派S-pai |
|
接口 |
nodeType常量 |
nodeType值 |
備註 |
|
element |
Node.ELEMENT_NODE |
1 |
元素結點 |
|
text |
Node.TEXT_NODE |
3 |
文本結點 |
|
document |
Node.DOCUMENT_NODE |
9 |
Document |
|
comment |
Node.COMMENT_NODE |
8 |
註釋文本 |
|
documentFragment |
Node.DOCUMENT_FRAGMENT_NODE |
11 |
Document片段 |
|
attr |
Node.ATTRIBUTE_NODE |
2 |
結點屬性 |
在使用DOM操作HTML文檔時，經常使用document對象的相關方法，有關該對象的常用方法如表4-2所示。
|
document對象的常用方法 思派S-pai |
|
方法 |
描述 |
|
createAttribute() |
用指定的名字創建新的attr結點，即屬性結點 |
|
createComment() |
用指定的字符串創建新的comment結點 |
|
createElement() |
用指定的標記名創建新的element結點 |
|
createTextNode() |
用指定的文本創建新的textNode結點 |
|
getElementById() |
返回文檔中具有指定id屬性的element結點 |
|
getElementsByTagName() |
返回文檔中具有指定標記名的所有element結點 |
除了document對象對應的屬性及方法比較常用之外，對於element結點，可以通過調用getAttribute()，setAttribute()，removeAttribute()方法來查詢、設置或刪除一個element結點的相關屬性，例如<table>標記的border屬性。Element對象的常用方法：
|
Element對象的常用方法 思派S-pai |
|
方法 |
描述 |
|
getAttribute() |
以字符串形式返回指定屬性的值 |
|
getAttributeNode() |
以attr結點的形式返回指定屬性的值 |
|
getElementsByTagName() |
返回一個Node數組，包含具有指定標記名的所有element結點的子孫結點，其順序爲在文檔中出現的順序 |
|
hasAttribute() |
如果該元素具有指定名字的屬性，則返回true |
|
removeAttribute() |
從元素中刪除指定的屬性 |
|
removeAttributeNode() |
從元素的屬性列表中刪除指定的attr結點 |
|
setAttribute() |
把指定的屬性設置爲指定的字符串值，如果該屬性不存在則添加一個新屬性 |
|
setAttributeNode() |
把屬性的attr結點添加到該元素的屬性列表中 |
Node對象定義了一系列屬性和方法，以便於遍歷整個文檔。用parentNode屬性和childNodes[]數組可以在文檔樹中上下移動；通過遍歷childNodes[]數組或者使用firstChild和nextSibling屬性進行循環操作，也可以使用lastChild和previousSibling進行逆向循環操作，還可以根據需要枚舉指定結點的子結點。而調用appendChild()、insertBefore()、removeChild()、replaceChild()方法可以改變一個結點的子結點從而改變文檔樹。
|
node對象的常用屬性 思派S-pai |
|
屬性 |
描述 |
|
attribute |
如果該結點是一個element，則以NameNodeMap形式返回該元素的屬性 |
|
childNodes |
以node[]的形式存放當前結點的子結點。如果沒有子結點，則返回空數組 |
|
firstNodes |
以node的形式返回當前結點的第一個子結點。如果沒有子結點，則爲null |
|
lastNodes |
以node的形式返回當前結點的最後一個子結點。如果沒有子結點，則爲null |
|
nextSibling |
以node的形式返回當前結點的兄弟下一個子結點。如果沒有子結點，則爲null |
|
nodeNode |
結點的名字，element結點代表element的標記名稱 |
|
nodeType |
代表結點的類型 |
|
setAttributeNode() |
把指定的attr結點添加到該元素的屬性列表中 |
|
parentNode |
以node的形式返回當前結點的父結點。如果沒有父結點，則返回null |
|
previousSibling |
以node的形式返回緊挨當前結點、位於它之前的兄弟結點。如果沒有這樣的節點，則返回null |
在使用DOM操作HTML文檔時，會使用node對象的相關方法，通過這些方法實現對指定結點的具體操作。
|
node對象的常用方法 思派S-pai |
|
方法 |
描述 |
|
appendChild() |
通過把一個結點增加到當前結點的childNodes[]組，給文檔樹增加結點 |
|
cloneNode() |
複製當前結點，或者複製當前結點以及它的所有子結點 |
|
hasChildNodes() |
如果當前結點擁有子結點，則將返回true |
|
insertBefore() |
給文檔樹插入一個結點，位置在當前結點的指定子結點前。如果該結點已經存在，則刪除之再插入到它的位置。 |
|
removeChild() |
從文檔樹中刪除並返回指定的子結點 |
|
replaceChild() |
從文檔樹中刪除並返回指定的子結點，用另一個結點替換它 |
大致瞭解了DOM對HTML文檔操作提供的相關對象及方法後，通過實例來體驗它的作用。