DOM

1 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又稱爲文檔樹模型

 

 

文檔：一個網頁可以稱爲文檔

節點：網頁中的所有內容都是節點（標籤、屬性、文本、註釋等）

元素：網頁中的標籤

屬性：標籤的屬性

2 模擬文檔樹結構

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);

3 DOM經常進行的操作

獲取元素

動態創建元素

對元素進行操作(設置其屬性或調用其方法)

事件(什麼時機做相應的操作)

4 獲取頁面元素

4.1 爲什麼要獲取頁面元素

例如：我們想要操作頁面上的某部分(顯示/隱藏，動畫)，需要先獲取到該部分對應的元素，才進行後續操作

4.2 根據id獲取元素

var div = document.getElementById('main');
console.log(div);

獲取到的數據類型 HTMLDivElement，對象都是有類型的

HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由於id名具有唯一性，部分瀏覽器支持直接使用id名訪問元素，但不是標準方式，不推薦使用。

4.3 根據標籤名獲取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

4.4 根據name獲取元素*

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

4.5 根據類名獲取元素

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

4.6 根據選擇器獲取元素

var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

4.7 總結

掌握

getElementById()

getElementsByTagName()

瞭解

getElementsByName()

getElementsByClassName()

querySelector()

querySelectorAll()

4.8 案例

1.點擊按鈕彈出對話框

2.點擊按鈕修改超鏈接的地址和熱點文字

3.點擊(每個)圖片彈出對話框

4.點擊圖片設置自身寬和高

5.點擊按鈕修改每個圖片的title屬性

6.點擊按鈕顯示哈哈(排他功能)

7.點擊按鈕顯示和隱藏div

8.顯示和隱藏二維碼

9.點擊按鈕修改所有p標籤內容

10.點擊按鈕修改所有文本框內容

11.點擊按鈕切換圖片

12.點擊超鏈接停止跳轉頁面

13.點擊小圖顯示大圖

14.美女相冊

15點擊按鈕選中性別和興趣