前端學習之路---DOM操作(WebAPI)
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經常進行的操作
- 獲取元素 - 動態建立元素 - 對元素進行操作(設定其屬性或呼叫其方法) - 事件(什麼時機做相應的操作)