1.什么是DOM?
DOM -- Dicument Object Model（文檔對(duì)象模型）.DOM 是W3C的標(biāo)準(zhǔn)，DOM定義了訪問HTML和XML文檔的標(biāo)準(zhǔn)。在W3C的標(biāo)準(zhǔn)中，DOM是獨(dú)立于平臺(tái)和語言的接口，它允許程序和腳本動(dòng)態(tài)的訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。
簡(jiǎn)單的來說，DOM就是腳本拿來操作HTML文檔的。
DOM是針對(duì)xml經(jīng)過擴(kuò)展用于HTML的應(yīng)用程序編程接口，應(yīng)用程序編程接口（API）。DOM把整個(gè)頁面映射為一個(gè)多層的節(jié)點(diǎn)結(jié)構(gòu)，html或者xml頁面中的每個(gè)組成部分都是某種類型的節(jié)點(diǎn)，這些節(jié)點(diǎn)又包含著不同類型的數(shù)據(jù)。
2.DOM的初映象
這是該DOM樹對(duì)應(yīng)得代碼
可以清楚的看到，代碼之間的邏輯關(guān)系被DOM樹很好的表現(xiàn)了出來，html的一切節(jié)點(diǎn)的根節(jié)點(diǎn)，而根節(jié)點(diǎn)有兩個(gè)子節(jié)點(diǎn)，head和body，然后head和body也有各自的子節(jié)點(diǎn)，于是就這樣形成了一棵樹狀結(jié)構(gòu)。
而各種節(jié)點(diǎn)也有類型的分別
如上圖的DOM樹來說，總共有三種節(jié)點(diǎn)：
元素節(jié)點(diǎn)：<body>,<head>都是元素節(jié)點(diǎn)
文本節(jié)點(diǎn)：“文檔標(biāo)題”，“我的鏈接”等等，都是文本節(jié)點(diǎn)
屬性節(jié)點(diǎn)：href就是屬性節(jié)點(diǎn)
3.DOM的節(jié)點(diǎn)類型
剛剛的圖，只顯示出了三種DOM的節(jié)點(diǎn)類型，其實(shí)DOM有很多種節(jié)點(diǎn)類型，常用的節(jié)點(diǎn)類型圖如下圖所示：
元素節(jié)點(diǎn)（element）：html,head,body,h1,ul,div這些都是元素節(jié)點(diǎn)
屬性節(jié)點(diǎn)（attr）：id,class,href這些標(biāo)簽內(nèi)的屬性就是屬性節(jié)點(diǎn)
文本節(jié)點(diǎn)（text）:元素節(jié)點(diǎn)內(nèi)部的文本值，元素節(jié)點(diǎn)后面的空白區(qū)域都是text
注釋節(jié)點(diǎn)（comment）://,<!-- -->文檔中用的注釋全是注釋節(jié)點(diǎn)
文檔節(jié)點(diǎn)（document）和文檔類型節(jié)點(diǎn):<!DOCTYPE html>只有這個(gè)是文檔節(jié)點(diǎn)，html是文檔節(jié)點(diǎn)的子節(jié)點(diǎn)
文檔片段節(jié)點(diǎn)（documentFragment）:主要用于占位符，插入的時(shí)候插入文檔類型節(jié)點(diǎn)的子節(jié)點(diǎn)
依照上述的文檔類型，我們有了三個(gè)屬性來查看獲得節(jié)點(diǎn)：nodeType,nodeValue,nodeName
所以在實(shí)際開發(fā)中，最常用的是文本節(jié)點(diǎn)的nodeValue,以此來獲得text的值
現(xiàn)在我們已經(jīng)明晰了理論知識(shí)，但是在敘述實(shí)際操作前，還要講述一下DOM對(duì)應(yīng)得瀏覽器渲染機(jī)制了。
4.domReady
? ??1.什么是domReady?
html是一種標(biāo)記語言，它告訴我們這個(gè)頁面有什么內(nèi)容，但行為交互式需要通過DOM操作來實(shí)現(xiàn)的。不要以為有兩個(gè)尖括號(hào)了他就是一個(gè)DOM了，html需要瀏覽器解析才會(huì)實(shí)現(xiàn)DOM節(jié)點(diǎn)，當(dāng)我們向地址欄傳入一個(gè)url的時(shí)候，我們開始加載頁面，就能看到內(nèi)容，在這期間就有一個(gè)DOM節(jié)點(diǎn)構(gòu)建的過程。節(jié)點(diǎn)是以樹的形式組織的。當(dāng)頁面上所有的html都轉(zhuǎn)化為節(jié)點(diǎn)的時(shí)候，就叫做DOM樹構(gòu)建完畢，此時(shí)簡(jiǎn)稱domReady。
2.那么瀏覽器如何將html的標(biāo)簽解析變成DOM節(jié)點(diǎn)的呢？
實(shí)際上瀏覽器是通過渲染引擎來實(shí)現(xiàn)的。渲染引擎的指責(zé)就是啊請(qǐng)求的內(nèi)容顯示到瀏覽器屏幕上。
這個(gè)過程并不包括瀏覽器加載的外部資源，比如圖片，腳本這些。所以在實(shí)際開發(fā)中，js文件總是在dom渲染完畢之后才開始調(diào)用的。
window.onload方法，就是表示當(dāng)頁面所有元素都加載完畢，并且所有要求的資源也加載完畢的時(shí)候才觸發(fā)執(zhí)行該函數(shù)內(nèi)的內(nèi)容。這樣保證了代碼在文件基本渲染完畢之后再開始調(diào)用
但是如果圖片文件非常多，一時(shí)間加載不出來，js文件點(diǎn)擊就沒有效果，此時(shí)用戶體驗(yàn)極差，于是w3c新增加了一個(gè)DOMContentLoaded事件。各大主流框架針對(duì)DOMContentLoaded開發(fā)了各自的domReady事件，比如jquery的domReady。
