文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標記語言（HTML或XML）的標準編程接口。

W3C已經(jīng)定義了一系列DOM接口，通過這些DOM接口可以改變網(wǎng)頁的內(nèi)容、結構和樣式。

1、對于JavaScript，為了能夠使JavaScript操作HTML，JavaScript就有了一套自己的dom編程接口；

2、對于HTML，dom使html形成一顆dom樹，包含文檔、元素、節(jié)點。

文檔：整個頁面就是一個文檔；

元素：頁面中所有的標簽都叫做元素；

節(jié)點：頁面中所有的內(nèi)容都是節(jié)點。文檔節(jié)點（ducument對象）、元素節(jié)點（element對象）、屬性節(jié)點（attribute對象）、文本節(jié)點（text對象）、注釋節(jié)點（comment對象），代碼間的換行也是一個節(jié)點。

我們獲取過來的所有DOM元素都是一個對象（object）。

對于DOM操作，我們主要針對于 對元素的操作，主要有創(chuàng)建、增、刪、改、查、屬性操作、事件操作。

一、創(chuàng)建

主要包括三種：

1、document.write

特點：如果頁面文檔流加載完畢（即所有的代碼執(zhí)行完畢），再調(diào)用這句話會導致頁面重繪（即重新給我們創(chuàng)建了一個html頁面，我們之前寫的東西都沒了）。（很少使用）

2、innerHTML：將內(nèi)容寫入某個DOM節(jié)點，不會導致頁面全部重繪。

3、createElement：也不會導致頁面重繪。

innerHTML和createElement效率對比：

①innerHTML拼接效率測試：

<script>     function fn() {         var d1 = +new Date();          var str = '';         for (var i = 0; i < 1000; i++) {             document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';         }         var d2 = +new Date();         console.log(d2 - d1);     }     fn(); </script>

執(zhí)行結果如下

執(zhí)行速度為1600毫秒左右

②createElement效率測試

<script>     function fn() {         var d1 = +new Date();          for (var i = 0; i < 1000; i++) {             var div = document.createElement('div');             div.style.width = '100px';             div.style.height = '2px';             div.style.border = '1px solid red';             document.body.appendChild(div);         }         var d2 = +new Date();         console.log(d2 - d1);     }     fn(); </script>

執(zhí)行結果如下

執(zhí)行速度為十幾秒

③innerHTML數(shù)組效率測試

<script>     function fn() {         var d1 = +new Date();         var array = [];         for (var i = 0; i < 1000; i++) {             array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');         }         document.body.innerHTML = array.join('');         var d2 = +new Date();         console.log(d2 - d1);     }     fn(); </script>

執(zhí)行結果如下

執(zhí)行速度為個位數(shù)秒

結果分析：

執(zhí)行效率：innerHTML數(shù)組效率 > createElement效率 > innerHTML拼接效率

所以創(chuàng)建多個元素時innerHTML效率更高（不要拼接字符串，采用數(shù)組形式拼接），結構稍微復雜麻煩一些。

createElement()創(chuàng)建多個元素時效率稍微低一些，但結構清晰。

二、增

主要包括兩種：

1、appendChild：node.appendChild(child)是在后面追加元素

2、insertBefore：node.insertBefore(child)是添加到最前面

三、刪

removeChild：node.removeChild(child)刪除父節(jié)點中的一個子節(jié)點，并返回被刪除的節(jié)點。

四、改

主要是修改dom元素的屬性，dom元素的內(nèi)容、屬性，表單的值等。

1、修改元素屬性：src、href、title等?？梢?span style="color: #ff6600;">直接修改，這些屬性都是可讀寫的。

2、修改普通元素內(nèi)容：innerText、innerHTML。（兩者都是可讀寫的）

element.innerText：讀取時，只讀取標簽里面的內(nèi)容，不會少文字，但不會讀取里邊的標簽、空格和換行。（非標準）

element.innerHTML：讀取時，整個讀取出來，包括html標簽，同時保留空格和換行。（W3C標準，常用）

3、修改表單元素：value（表單里邊的內(nèi)容）、type（表單類型）、disabled（是否被使用）等。

4、修改元素樣式：style、className。可以直接通過style修改屬性，如果需要修改的屬性較多或者為了方便操作，建議修改className。

五、查

主要獲取查詢dom的元素

1、DOM提供的API方法：getEementById、getElementsByTagName等古老的方法。

2、H5提供的新方法：querySelector、querySelectorAll 。（提倡）

3、利用節(jié)點操作獲取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）。（提倡）

六、屬性操作

主要針對自定義屬性

1、setAttribute：設置dom的屬性值。 element.setAttribute('屬性', '值'); 主要針對自定義屬性

2、getAttribute：獲取dom的屬性值

獲取dom的屬性值有兩種方法：element.屬性 和 element.getAttribute（‘屬性’）

區(qū)別：

element.屬性 獲取的是內(nèi)置屬性值（元素本身自帶的屬性）；

element.getAttribute（‘屬性’）主要獲取的是自定義的屬性（我們自己添加的屬性）。

3、removeAttribute：移除屬性。 removeAttribute(‘屬性’)

七、事件操作

給元素注冊事件，采?。?/span>事件源.事件類型=事件處理程序

onclick：鼠標左鍵單擊事件。

onmouseover：鼠標經(jīng)過時觸發(fā)。

onmouseout：鼠標離開時觸發(fā)。

onfocus：獲得鼠標焦點觸發(fā)。

onblur： 失去鼠標焦點觸發(fā)。

dblclick： 鼠標左鍵雙擊事件。

onmousemove：鼠標移動觸發(fā)。

onmousedown：按下鼠標鍵時觸發(fā)。

onmouseup：釋放按下的鼠標鍵時觸發(fā)。

推薦學習：JavaScript視頻教程