文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標記語言（HTML或XML）的標準編程接口。
W3C已經定義了一系列DOM接口，通過這些DOM接口可以改變網頁的內容、結構和樣式。
1、對於JavaScript，爲了能夠使JavaScript操作HTML，JavaScript就有了一套自己的dom編程接口；
2、對於HTML，dom使html形成一顆dom樹，包含文檔、元素、節點。
文檔：整個頁面就是一個文檔；
元素：頁面中所有的標籤都叫做元素；
節點：頁面中所有的內容都是節點。文檔節點（ducument對象）、元素節點（element對象）、屬性節點（attribute對象）、文本節點（text對象）、註釋節點（comment對象），代碼間的換行也是一個節點。
我們獲取過來的所有DOM元素都是一個對象（object）。
對於DOM操作，我們主要針對於 對元素的操作，主要有創建、增、刪、改、查、屬性操作、事件操作。
一、創建
主要包括三種：
1、document.write
2、innerHTML：將內容寫入某個DOM節點，不會導致頁面全部重繪。
3、createElement：也不會導致頁面重繪。
innerHTML和createElement效率對比：
①innerHTML拼接效率測試：
1 <script>
2 function fn() {
3 var d1 = +new Date();
4
5 var str = '';
6 for (var i = 0; i < 1000; i++) {
7 document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
8 }
9 var d2 = +new Date();
10 console.log(d2 - d1);
11 }
12 fn();
13 </script>執行結果如下
執行速度爲1600毫秒左右
②createElement效率測試
1 <script>
2 function fn() {
3 var d1 = +new Date();
4
5 for (var i = 0; i < 1000; i++) {
6 var div = document.createElement('div');
7 div.style.width = '100px';
8 div.style.height = '2px';
9 div.style.border = '1px solid red';
10 document.body.appendChild(div);
11 }
12 var d2 = +new Date();
13 console.log(d2 - d1);
14 }
15 fn();
16 </script>執行結果如下
執行速度爲十幾秒
③innerHTML數組效率測試
1 <script>
2 function fn() {
3 var d1 = +new Date();
4 var array = [];
5 for (var i = 0; i < 1000; i++) {
6 array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
7 }
8 document.body.innerHTML = array.join('');
9 var d2 = +new Date();
10 console.log(d2 - d1);
11 }
12 fn();
13 </script>執行結果如下
執行速度爲個位數秒
結果分析：
執行效率：innerHTML數組效率 > createElement效率 > innerHTML拼接效率
所以創建多個元素時innerHTML效率更高（不要拼接字符串，採用數組形式拼接），結構稍微複雜麻煩一些。
createElement()創建多個元素時效率稍微低一些，但結構清晰。
二、增
主要包括兩種：
1、appendChild：node.appendChild(child)是在後面追加元素
2、insertBefore：node.insertBefore(child)是添加到最前面
三、刪
removeChild：node.removeChild(child)刪除父節點中的一個子節點，並返回被刪除的節點。
四、改
主要是修改dom元素的屬性，dom元素的內容、屬性，表單的值等。
1、修改元素屬性：src、href、title等。可以直接修改，這些屬性都是可讀寫的。
2、修改普通元素內容：innerText、innerHTML。（兩者都是可讀寫的）
element.innerText：讀取時，只讀取標籤裏面的內容，不會少文字，但不會讀取裏邊的標籤、空格和換行。（非標準）
element.innerHTML：讀取時，整個讀取出來，包括html標籤，同時保留空格和換行。（W3C標準，常用）
3、修改表單元素：value（表單裏邊的內容）、type（表單類型）、disabled（是否被使用）等。
4、修改元素樣式：style、className。可以直接通過style修改屬性，如果需要修改的屬性較多或者爲了方便操作，建議修改className。
五、查
主要獲取查詢dom的元素
1、DOM提供的API方法：getEementById、getElementsByTagName等古老的方法。
2、H5提供的新方法：querySelector、querySelectorAll 。（提倡）
3、利用節點操作獲取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）。（提倡）
六、屬性操作
主要針對自定義屬性
1、setAttribute：設置dom的屬性值。 element.setAttribute('屬性', '值'); 主要針對自定義屬性
2、getAttribute：獲取dom的屬性值
獲取dom的屬性值有兩種方法：element.屬性 和 element.getAttribute（‘屬性’）
區別：
element.屬性 獲取的是內置屬性值（元素本身自帶的屬性）；
element.getAttribute（‘屬性’）主要獲取的是自定義的屬性（我們自己添加的屬性）。
3、removeAttribute：移除屬性。 removeAttribute(‘屬性’)
七、事件操作
給元素註冊事件，採取：事件源.事件類型=事件處理程序
onclick：鼠標左鍵單擊事件。
onmouseover：鼠標經過時觸發。
onmouseout：鼠標離開時觸發。
onfocus：獲得鼠標焦點觸發。
onblur： 失去鼠標焦點觸發。
dblclick： 鼠標左鍵雙擊事件。
onmousemove：鼠標移動觸發。
onmousedown：按下鼠標鍵時觸發。
onmouseup：釋放按下的鼠標鍵時觸發。
原文出處：https://www.cnblogs.com/sunyan-blog/p/11865565.html