JavaScript文檔對象模型(DOM)——DOM核心操做

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

W3C已經定義了一系列DOM接口，經過這些DOM接口能夠改變網頁的內容、結構和樣式。

一、對於JavaScript，爲了可以使JavaScript操做HTML，JavaScript就有了一套本身的dom編程接口；

二、對於HTML，dom使html造成一顆dom樹，包含文檔、元素、節點。

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

元素：頁面中全部的標籤都叫作元素；

節點：頁面中全部的內容都是節點。文檔、元素、屬性、文本都是節點，代碼間的換行也是一個節點。

咱們獲取過來的全部DOM元素都是一個對象（object）。

 

 

對於DOM操做，咱們主要針對於 對元素的操做，主要有建立、增、刪、改、查、屬性操做、事件操做。

1、建立

主要包括三種：

一、document.write

特色：若是頁面文檔流加載完畢（即全部的代碼執行完畢），再調用這句話會致使頁面重繪（即從新給咱們建立了一個html頁面，咱們以前寫的東西都沒了）。（不多使用）

二、innerHTML：將內容寫入某個DOM節點，不會致使頁面所有重繪。

三、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()建立多個元素時效率稍微低一些，但結構清晰。

2、增

主要包括兩種：

一、appendChild：node.appendChild(child)是在後面追加元素

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

3、刪

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

4、改

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

一、修改元素屬性：src、href、title等。能夠直接修改，這些屬性都是可讀寫的。

二、修改普通元素內容：innerText、innerHTML。（二者都是可讀寫的）

element.innerText：讀取時，只讀取標籤裏面的內容，不會少文字，但不會讀取裏邊的標籤、空格和換行。（非標準）

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

三、修改表單元素：value（表單裏邊的內容）、type（表單類型）、disabled（是否被使用）等。

四、修改元素樣式：style、className。能夠直接經過style修改屬性，若是須要修改的屬性較多或者爲了方便操做，建議修改className。

5、查

主要獲取查詢dom的元素

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

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

三、利用節點操做獲取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）。（提倡）

6、屬性操做

主要針對自定義屬性

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

二、getAttribute：獲取dom的屬性值

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

區別：

element.屬性  獲取的是內置屬性值（元素自己自帶的屬性）；

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

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

7、事件操做

給元素註冊事件，採起：事件源.事件類型=事件處理程序

onclick：鼠標左鍵單擊事件。

onmouseover：鼠標通過時觸發。

onmouseout：鼠標離開時觸發。

onfocus：得到鼠標焦點觸發。

onblur： 失去鼠標焦點觸發。

dblclick： 鼠標左鍵雙擊事件。

onmousemove：鼠標移動觸發。

onmousedown：按下鼠標鍵時觸發。

onmouseup：釋放按下的鼠標鍵時觸發。