JavaScript中的DOM模型

文檔對象模型（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

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

2、innerHTML：將內容寫入某個DOM節點，不會導致頁面全部重繪。

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>

執行結果如下

執行速度為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>

執行結果如下

執行速度為十幾秒

③innerHTML數組效率測試

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

執行結果如下

執行速度為個位數秒

結果分析：

執行效率：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等?？梢?span>直接修改，這些屬性都是可讀寫的。

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(‘屬性’)  

七、事件操作

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

onclick：鼠標左鍵單擊事件。

onmouseover：鼠標經過時觸發。

onmouseout：鼠標離開時觸發。

onfocus：獲得鼠標焦點觸發。

onblur： 失去鼠標焦點觸發。

dblclick： 鼠標左鍵雙擊事件。

onmousemove：鼠標移動觸發。

onmousedown：按下鼠標鍵時觸發。

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

以上就是淺談JavaScript之DOM核心操作的詳細內容，更多請關注億速云其它相關文章！