DOM

### DOM的概念

文件物件模型（Document Object Model，簡稱DOM），是[W3C](http://baike.baidu.com/item/W3C)組織推薦的處理可擴充套件標誌語言的標準程式設計介面。在網頁上，組織頁面（或文件）的物件被組織在一個樹形結構中，用來表示文件中物件的標準模型就稱為DOM。Document Object Model的歷史可以追溯至1990年代後期微軟與[Netscape](http://baike.baidu.com/item/Netscape)的“瀏覽器大戰”，雙方為了在[JavaScript](http://baike.baidu.com/item/JavaScript)與[JScript](http://baike.baidu.com/item/JScript)一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既有[VBScript](http://baike.baidu.com/item/VBScript)、[ActiveX](http://baike.baidu.com/item/ActiveX)、以及微軟自家的[DHTML](http://baike.baidu.com/item/DHTML)格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作。

DOM又稱為文件樹模型

- 文件：一個網頁可以稱為文件 - 節點：網頁中的所有內容都是節點（標籤、屬性、文字、註釋等） - 元素：網頁中的標籤 - 屬性：標籤的屬性

### 模擬文件樹結構

function Element(option) {
  this.id = option.id || '';
  this.nodeName = option.nodeName || '';
  this.nodeValue = option.nodeValue || '';
  this.nodeType = 1;
  this.children = option.children || [];
}

var doc = new Element({
  nodeName: 'html'
});
var head = new Element({
  nodeName: 'head'
});
var body = new Element({
  nodeName: 'body'
})
doc.children.push(head);
doc.children.push(body);

var div = new Element({
  nodeName: 'div',
  nodeValue: 'haha',
});

var p = new Element({
  nodeName: 'p',
  nodeValue: '段落'
})
body.children.push(div);
body.children.push(p);

function getChildren(ele) {
  for(var i = 0; i < ele.children.length; i++) {
    var child = ele.children[i];
    console.log(child.nodeName);
    getChildren(child);
  }
}
getChildren(doc);
 

### DOM經常進行的操作

- 獲取元素 - 動態建立元素 - 對元素進行操作(設定其屬性或呼叫其方法) - 事件(什麼時機做相應的操作)