理解DOM

DOM是文檔對象模型，DOM是一種XML文檔的解析標準，DOM提供相應的API（函數庫，提供編程的工具）能夠對節點樹進行增、刪、改、查，DOM的原理是將XML、XHTML文檔裝入內容，並以節點的形式解析爲一顆節點樹（節點是元素標記），利用DOM能夠讓JavaScript對網頁中的元素進行控制，實現動態網頁的功能。

DOM的優點主要表如今：易用性強，使用DOM時，將把全部的XML文檔信息都存於內存中，而且遍歷簡單，支持XPath，加強了易用性。

DOM的缺點主要表如今：效率低，解析速度慢，內存佔用量太高，對於大文件來講幾乎不可能使用。另外效率低還表如今大量的消耗時間，由於使用DOM進行解析時，將爲文檔的每一個element、attribute、processing-instrUCtion和comment都建立一個對象，這樣在DOM機制中所運用的大量對象的建立和銷燬無疑會影響其效率。

 

  節點的屬性和方法：nodeName： 節點的名字。 /nodeValue：節點的值。/nodeTYpe:節點的類型常量值。/firstChild:指向childNodes列表中的第一個節點。/lastChild:指向在childNodes列表中的最後一個節點。/childNodes：全部子節點的列表。/previousSibling:指向前一個兄弟節點。/nextSibling：指向後一個兄弟節點。/hasChildNodes:當childNodes包含一個或多個節點時返回真。/attributes：僅用於Element節點。/appendChild（node）將node添加帶childNodes的末尾。/removeChild（Node）從childNodes中刪除node。/replaceChild（newnode，oldnode）將childNodes中的oldnode替換成newnode。/insertBefore（newnode，refnode）在childNodes中的refnode以前插入newnode。

 

 

瞭解DOM須要清楚幾個問題：

1. 什麼是DOM？
2. DOM能夠用來幹什麼？
3. DOM是怎麼來的？
4. 怎麼使用DOM？

---

 

1. 什麼是DOM? 
   DOM(document Object Model）,是針對HTML和XML的API。 能夠理解爲DOM就是一系列功能集合。

2. DOM能夠用來幹什麼？ 
   理解了DOM是API，就知道它就是一些功能，經過這些功能能夠對HTML文檔進行動態操做，從而實現許多動態交互效果。

3. DOM是怎麼來的？ 
   回答這個問題須要追溯到1990年代後期微軟與Netscape的‘瀏覽器大戰’。

4. 怎麼使用DOM? 
   經過javascript對HTML DOM進行訪問。 
   HTML DOM將html元素定義爲對象，API以對象方法和對象屬性的形式實現。 
   可直接調用DOM實現的方法，進行DOM操做，例如： 

   
   getElementById() 
   返回帶有指定 ID 的元素。 
   getElementsByTagName() 
   返回包含帶有指定標籤名稱的全部元素的節點列表（集合/節點數組）。 
   getElementsByClassName() 
   返回包含帶有指定類名的全部元素的節點列表。 
   appendChild() 
   把新的子節點添加到指定節點。 
   removeChild() 
   刪除子節點。 
   replaceChild() 
   替換子節點。 
   insertBefore() 
   在指定的子節點前面插入新的子節點。 
   createAttribute() 
   建立屬性節點。 
   createElement() 
   建立元素節點。 
   createTextNode() 
   建立文本節點。 
   getAttribute() 
   返回指定的屬性值。 
   setAttribute() 
   把指定屬性設置或修改成指定的值。