每天一句：成長的速度取決于在過程中發(fā)現(xiàn)和解決問題的速度，最終這是一個量變引發(fā)質變的過程；

DOM(Document Object Model)即文檔對象模型，針對HTML和XML文檔的API(應用程序接口)。DOM描繪了一個層次化的節(jié)點樹，用于添加、刪除和修改頁面的某一部分。

一、DOM介紹

DOM中的三個字母，D(文檔)可以理解為整個WEB加載的頁面文檔；O(對象)可以理解為類似window對象子類的東西，可以調(diào)用屬性和方法，也就是document對象；M(模型)可以理解為網(wǎng)頁文檔的樹形結構。
DOM提供了訪問結構化文檔的一種方式，但DOM并不是一種技術，它只是訪問結構化文檔(主要是XML文檔和HTML文檔)的一種思想。
DOM有三個等級，分別是DOM1、DOM2、DOM3，并且DOM1在1998年10月成為W3C標準。DOM1所支持的瀏覽器包括IE6+、Firefox、Safari、Chrome和Opera1.7+。

注: IE中的所有DOM對象都是以COM對象的形式實現(xiàn)的，即是IE中的DOM會與其他瀏覽器有一定的差異。

• 節(jié)點
  加載HTML頁面時，web瀏覽器生成一個樹形結構，用來表示頁面內(nèi)部結構。DOM將這種樹形結構理解為由節(jié)點組成:

  上圖樹形結構，html標簽，沒有父輩，沒有兄弟，所以html標簽為根標簽。head標簽是html的子標簽，meta和title標簽是兄弟關系。如果把每個標簽當作一個節(jié)點，那么這些節(jié)點組合成的就是節(jié)點樹。

• 節(jié)點種類
  元素節(jié)點、文本節(jié)點、屬性節(jié)點;

  <div id="box">測試Div</div>
  元素節(jié)點: div
  屬性節(jié)點: id="box"
  文本節(jié)點: 測試Div

二、查找元素

• getElementById() 獲取特定ID的節(jié)點
• getElementsByName() 通過name書信獲取到節(jié)點列表
• getElementsByTagName() 獲取相同元素的節(jié)點列表
• getElementsByClassName() 獲取特定類名元素的節(jié)點列表

案例: getElementsByClassName的封裝(低版本中沒有該方法)
案例: 導航下拉菜單效果

三、DOM節(jié)點

• node節(jié)點屬性
  節(jié)點可以分為元素節(jié)點、屬性節(jié)點和文本節(jié)點，而這些節(jié)點又有三個非常有用的屬性: nodeName、nodeType和nodeValue;

  var oBox = document.getElementById("box");
  alert(oBox.nodeName); // DIV
  alert(oBox.nodeType); // 1
  alert(oBox.nodeValue); // null

  var att = oBox.attributes;    // 獲取所有屬性節(jié)點集合
  alert(att[0].nodeValue);  // box

• 層次節(jié)點屬性
  節(jié)點的層次可以劃分為: 父節(jié)點與子節(jié)點、兄弟節(jié)點兩種。當需要獲取其中一個元素節(jié)點時，就可以使用層次節(jié)點屬性倆獲取它相關層次的節(jié)點;

  • childNodes: 獲取當前元素節(jié)點的所有子節(jié)點（非IE下包含了文本和元素類型節(jié)點，也會包含非法嵌套的子節(jié)點；IE下只包含元素類型節(jié)點）

  for(var i=0; i<oBox.childNodes.length; i++){
      // 判斷元素節(jié)點
      if(box.childNodes[i].nodeType === 1){
        // 注意輸出的是大寫的元素名
        alert('元素節(jié)點:' + box.childNodes[i].nodeName);    
      } else if(box.childNodes[i].nodeType === 3){
        // 判斷文本節(jié)點(有空的文本節(jié)點，來源于換行操作)
        alert('文本節(jié)點:' + box.childNodes[i].nodeValue);
      }
  
  

}

> 
注1: 使用childNodes返回子節(jié)點對象時，可能是元素子節(jié)點，也有可能是文本子節(jié)點。元素子節(jié)點，可以通過nodeName或tagName獲取標簽名稱，來進一步判斷處理；而文本節(jié)點可以使用nodeValue獲??；
注2: 在獲取到文本節(jié)點時，是無法使用innerHTML屬性輸出文本內(nèi)容的(nodeValue和innerHTML第一個區(qū)別即是取值)；
注3: nodeValue和innerHTML第二個區(qū)別就是賦值時，nodeValue會在文本里的HTML轉義成特殊字符，從而達到形成單純文本的效果；

 // 結果: <span>我是span喔</span>
box.childNodes[0].nodeValue = '<span>我是span喔</span>' 
// 結果: 我是span喔
box.innerHTML = '<span>我是span喔</span>'    

注4: 在非IE中，標準的DOM具有識別空白文本節(jié)點的功能；而IE自動忽略了，如果要保持一致的元素節(jié)點，可以直接使用getElmentsByTagName方式，或者手動刪除/忽略(需要寫封裝操作); 

  - firstChild: 獲取當前元素節(jié)點的第一個子節(jié)點
    ```
     alert(oBox.firstChild.nodeName);
    ```

  - lastChild: 獲取當前元素節(jié)點的最后一個子節(jié)點

alert(oBox.lastChild.nodeName);

- parentNode: 獲取當前節(jié)點的父節(jié)點

alert( oBox.parentNode.nodeName);

- previousSibling: 獲取當前節(jié)點的前一個同級節(jié)點

alert(oBox.lastChild.previousSibling.nodeName);

- nextSibling: 獲取當前節(jié)點的后一個同級節(jié)點

alert(oBox.firstChild.nextSibling.nodeName);

- attributes: 獲取當前元素節(jié)點的所有屬性節(jié)點集合

oBox.attributes.length  // 返回屬性節(jié)點個數(shù)
oBox.attributes[0].nodeType // 節(jié)點類型
oBox.attributes[0].nodeValue // 屬性值
oBox.attributes[0].nodeName // 屬性名
oBox.attributes['title']    // 返回屬性名為title的屬性節(jié)點

- 節(jié)點操作
DOM不單單可以查找節(jié)點，也可以創(chuàng)建節(jié)點、復制節(jié)點、插入節(jié)點、刪除節(jié)點、替換節(jié)點；
- write(): 可以把任意字符串插入到文檔中

document.write('haha')

  - createElement(): 創(chuàng)建一個元素節(jié)點

document.createElement('p'); // 創(chuàng)建一個新元素節(jié)點p

  - appendChild(): 將新節(jié)點追加到子節(jié)點列表的末尾

var oUl = document.getElementById("box1"); // 獲取某個元素節(jié)點
var oP = document.createElement('p'); // 創(chuàng)建一個新元素節(jié)點
oUl.appendChild(oP); // 將新元素節(jié)點p，添加到子節(jié)點末尾

  - createTextNode(): 創(chuàng)建一個文本節(jié)點

var oText = document.createTextNode(‘哈哈’); // 創(chuàng)建一個文本節(jié)點

  - insertBefore(): 將新節(jié)點插入到前面

語法:
// obj父元素，將子元素A插入到子元素B的前面
obj.insertBefore(要插入的元素A, 子元素B);
var oBox = document.getElementById("box"); // 獲取到元素
var oP = document.createElement('p'); // 創(chuàng)建一個p節(jié)點
oBox.parentNode.insertBefore(oP, oBox); // 將p節(jié)點插入到oBox前面

  - cloneNode():    復制節(jié)點（創(chuàng)建一個節(jié)點的系統(tǒng)開銷相對會較大）

var oBox = document.getElementById("box"); // 獲取到元素
var newBox = oBox.cloneNode(true); // true即表示復制內(nèi)容
document.body.appendChild(newBox); // 添加到頁面

  - removeChild(): 移除節(jié)點

document.body.removeChild(newBox); // 將newBox從body從刪除

> 案例: 簡易日歷

作者：EndEvent
鏈接：http://www.itdecent.cn/p/934aa30ba207
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯(lián)系作者獲得授權并注明出處。