DOM是前端編程中一個非常重要的部分，我們在動態修改頁面的樣式、內容、添加頁面動畫以及為頁面元素綁定事件時，本質都是在操作DOM。DOM並不是JS語言的一個部分，我們通過JAVA、PHP等語言抓取網頁內容時需要對網頁進行解析並拿到我們感興趣的那部分內容，這時其實也是在操作DOM。當然在前端領域，我們...
本文承接：DOM LEVEL 1 中的那些事兒[上] 2.3 Element類型 Element類型應該是Document類型之外使用的最多的節點類型了，Element代表XML或HTML文檔中的一個元素，它具有以下特征： [1]nodeType為1 [2]nodeName為標簽名 [3]nodeValue為null [4]parentNode可能是Element或Document [5]childNode可能是Element,Text,Comment,Proccessinginstruction,CDATASection或EntityReference 除了使用nodeName，還可以使用tagName取得標簽名稱，但是返回的標簽名都是大寫的。 2.3.1 HTML元素 在HTML中，所有的HTML元素都是由HTMLElement類型或者其子類型來表示的，他們都存在以下這些標準特性： [1]id：元素在文檔中的唯一標識 [2]title：有關元素的附加說明信息，一般在滑鼠移動到該元素上面時顯示出來 [3]lang和dir：分別是元素內容的語言代碼和語言方向，一般很少使用 [4]className：為元素設置的css類名 這些特性都是可讀可寫的 2.3.1 取得元素的特性 每個元素都有一個或多個特性，特性一般用來為元素提供附加信息。操作特性的DOM方法主要有三個：getAttribute()、setAttribute()和removeAttribute()。 可以通過getAttribute取得元素特性，但傳入的參數必須與實際的特性名稱相同，比如要獲取class特性，則必須調用getAttribute("class")才可以。此外，getAttribute還可以獲取自定義的特性(HTML標準語言中沒有的特性)，特性名稱一般是不區分大小寫的。 除了通過getAttribute獲取元素特性，還可以通過元素的屬性來獲取相應的特性，除自定義特性之外(採用元素屬性的方式獲取自定義特性時會返回undefined，IE8及以下瀏覽器都會返回相應的特性值)。 有兩類特殊的特性，它們雖然擁有對應的屬性名，但是通過getAttribute獲得的特性值卻與對應的屬性值不同： 首先是"style"特性，如果通過getAttribute("style")，獲得的是style字元串；如果通過element.style，獲得的是一個對象(IE7及以下瀏覽器中，使用元素屬性與getAttribute方法返回的都是對象)。 另外一個特性是"onclick"這種事件處理程式特性，使用getAttribute時，返回的相應特性的字元串，而訪問元素的屬性返回的則是一個js函數(IE7及以下瀏覽器中，使用元素屬性與getAttribute方法返回的都是js函數)。 2.3.2 設置元素的特性 與getAttribute相對應的是setAttribute，可以用來設置元素的特性，如果特性已經存在，則修改對應的特性；如果特性不存在，則為元素創建相應的特性，通過這個方法設置的特性名稱都會轉換為小寫。 與getAttribute相似，也可以通過修改元素的屬性來為元素設置對應的特性，但是如果是自定義特性，除IE8及以下瀏覽器外，都不能通過元素屬性來設置。 註：在IE7及以下瀏覽器中，通過setAttribute設置class,style,事件處理程式沒有效果。 另外還有一個方法是removeAttribute，這個方法不僅會清除對應的特性值，還會刪除對應的特性，但IE6並不支持這個方法。 2.3.3 attributes屬性 Element類型是唯一一個使用attributes屬性的節點類型，這個屬性中包含一個NamedNodeMap，與NodeList相似，也是一個動態的集合。包含以下幾個方法： [1]getNamedItem(name)：根據特性名稱來獲取一個Attr節點 [2]removeNamedItem(name)：根據名稱刪除一個特定的Attr節點 [3]setNamedItem(Node)：向列表中添加一個Attr節點，以節點的nodeName為索引 [4]item(pos)：獲得對應位置索引的節點 2.3.4 創建Element節點 可以使用document.createElement方法創建一個元素，這個方法接收一個參數，即元素的標簽名。創建之後的節點必須通過2.1.3節中介紹的操作節點的方法才可以將元素在頁面中顯示出來。 在IE中還可以傳入這個元素的完整標簽，比如： document.createElement("<div id='div' name='div'>測試</div>") 這種方式有助於避開IE7及以下瀏覽器中動態創建元素時會出現的一些問題，目前已知的問題包括： [1]不能設置動態創建的iframe元素的name特性 [2]不能通過reset()重置動態創建的input元素 [3]動態創建的type為reset的button不能重置表單 [4]動態創建的一批name相同的radio按鈕彼此之間毫無關係 2.3.5 元素的子節點 元素可以擁有多個子節點和後代節點，因為一個元素可以是其他元素的子節點，通過childNodes屬性可以獲得元素的所有子節點。但是不同瀏覽器對於元素的childNodes屬性會有不同的處理，IE8及以下瀏覽器不會增加空白文本節點，以下麵代碼為例：
<ol id="list">在IE8及以下瀏覽器中，list的childNodes的length為4，而其他瀏覽器中則為9，因此如果要獲取元素的所有子元素節點，務必要遍歷childNodes，並通過nodeType來進行篩選。 此外，Element也支持getElementsByTagName。 2.4 Text類型 Text類型代表DOM樹中的文本節點，它有如下特點： [1]nodeType為3 [2]nodeName為#text [3]nodeValue為節點的文本字元串 [4]parentNode為Element [5]沒有childNodes 可以通過nodeValue或data屬性來獲取或者設置文本節點的內容，同時還有以下幾個函數來操縱文本節點的文本字元串： [1]appendData(text)：將文本添加到節點末尾 [2]deleteData(offset,count)：從offset處開始刪除count個字元 [3]insertData(offset, text)：從offset處插入text [4]replaceData(offset, count, text)：用text替換從offset之後的count個字元 [5]splitText(offset)：從offset處將文本節點拆分成兩個文本節點 [6]substringData(offset, count)：提取offset開始的count個字元 此外，文本節點還有一個length屬性，表示其內容字元串的長度，同時它的data屬性和nodeValue屬性也都有一個length屬性。 可以通過設置文本節點的nodeValue或data屬性來修改節點的內容，但是插入的內容都會經過HTML或XML編碼。 2.4.1 新建文本節點 可以通過document.createTextNode()來新建一個文本節點，這個方法接收一個參數，即文本節點的內容(內容也會經過編碼)。 一般情況下，一個元素只有一個文本節點，但如果向元素插入了多個文本節點，那麼它也可能會包含多個文本節點。 2.4.2文本節點的規範化與分割 2.1.4節介紹過normalize方法，這個方法會處理元素包含的文本節點，比如刪除空白的文本節點，合併相鄰的文本節點等。另外，還可以通過文本節點的splitText方法分割文本節點，這樣就會使得元素包含多個文本節點。 2.5 Comment類型 Comment類型在文檔中表示註釋，Comment的基本特征如下： [1]nodeType為8 [2]nodeName為#comment [3]nodeValue為註釋的內容 [4]parentNode可能是Document或Element [5]沒有子節點 Comment類型與Text類型繼承自同一個基類，因此它具有除splitText之外的所有Text類型節點所具有的方法。 可以通過document.createComment來創建一個註釋節點，但是實際中我們很少會創建或者操作文本節點。 2.6 CDATASection類型 CDATASection只針對XML文檔，它繼承自Text，也具有除splitText之外的所有Text類型所具有的方法，它的基本特征如下： [1]nodeType為4 [2]nodeName為#cdata-section [3]nodeValue為CDATA區域中的內容 [4]parentNode可能是Document或Element [5]沒有子節點 Comment類型與Text類型繼承自同一個基類，因此它具有除splitText之外的所有Text類型節點所具有的方法。 CDATASection只會出現在XML文檔中，瀏覽器中一般會把其視為Comment或Element來處理。在真正的XML文檔中，可以通過document.createCDataSection方法創建一個CDATASection節點 2.7 DocumentType類型 DocumentType包含著與文檔類型有關的信息，它的基本特征如下： [1]nodeType為10 [2]nodeName為doctype的名稱 [3]nodeValue為null [4]parentNode是Document [5]沒有子節點 在DOM1中，DocumentType類型不能動態創建，而只能通過解析頁面代碼的方式創建，支持它的瀏覽器會DocumentType對象保存在document.doctype中，DOM1中描述了doctype的三個屬性： [1]name：表示文檔類型的名稱 [2]entities：是文檔類型描述的實體的NamedNodeMap對象 [3]notations：是文檔類型描述的符號的NamedNodeMap對象 通常情況下，只有name屬性是有用的 2.8 DocumentFragment類型 在所有的節點類型中，只有DocumentFragment在文檔中沒有對應的標記，它是一種輕量級的文檔，可以包含和控制節點，但不會像完整的文檔那樣占用額外的資源，它的基本特征如下： [1]nodeType為11 [2]nodeName為#document-fragment [3]nodeValue為null [4]parentNode為null [5]childNode可能是Element,Text,Comment,Proccessinginstruction,CDATASection或EntityReference DocumentFragment類型繼承了Node的所有方法，主要用於執行針對文檔的DOM操作，可以使用document.createDocumentFragment方法創建一個文檔片段，它的使用有如下特點： (1)如果把文檔樹中的節點添加到文檔片段中，那麼就會從文檔樹中移除該節點；而添加到文檔片段中的節點也不會在文檔樹中顯示 (2)可以通過appendChild、insertBefore或replaceChild方法將文檔片段添加到文檔樹中，而這個操作只是把文檔片段的所有子節點添加到了文檔樹中，文檔片段本身是不會被添加到文檔樹中的。 2.9 Attr類型 特性節點是用來表示元素特性的，它也是存在於attributes屬性中的節點，它的基本特征如下： [1]nodeType為2 [2]nodeName為特性名稱 [3]nodeValue為特性的值 [4]parentNode為null [5]沒有子節點 Attr對象有三個屬性：name，value和specified，name與nodeName屬性對應，value與nodeValue屬性對應，而specified則表示特性是否是在代碼中指定的。 可以通過document.createAttribute方法創建一個特性節點，並且通過Element的setAttributeNode方法為元素添加特性。 註：實際中一般很少直接操作特性節點，而是通過getAttribute、setAttribute和removeAttribute方法，或者通過元素對象屬性的方式來操作元素的特性 在平時的DOM編程中，使用最多的應該是Document、Element和Text類型，DOM1中為這些節點的操作提供了底層的支撐和基礎的方法，後面的文章會陸續介紹後續對DOM1級的擴展，以及DOM2和DOM3所帶來的新的變化。
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ol>
