大家好，有些詞兒，程序員之間雖然天天說(shuō)，彼此之間心照不宣，但是在面對(duì)一些非技術(shù)的產(chǎn)品同學(xué)的時(shí)候，對(duì)方卻不一定能一下子就get到點(diǎn)。這個(gè)系列的文章就是為了解決這種尷尬的，理想的效果是，只要一提起這些詞兒，你腦海中就會(huì)出現(xiàn)一幅圖或者一段精妙的解釋?zhuān)俏覀兙统晒α恕?/span>
今天Java培訓(xùn)班講解的詞兒是DOM，是程序員里面最基礎(chǔ)、最常用的一個(gè)東西。它的全稱(chēng)是文檔對(duì)象模型(document Object
Model)，光看名字太抽象，簡(jiǎn)單解釋一下。我們知道，一個(gè)網(wǎng)頁(yè)，其實(shí)就是一個(gè)html文件，經(jīng)過(guò)瀏覽器的解析，最終呈現(xiàn)在用戶(hù)面前。html語(yǔ)言我們也講過(guò)，是由很多標(biāo)簽組成的，像這樣：
里面的head、body就是標(biāo)簽。這些標(biāo)簽不是隨意擺放的，他們有自己的規(guī)則。首先它們是嵌套的，一層套一層，比如html套body，body又套p標(biāo)簽。其次，每一層，可以同時(shí)存在很多標(biāo)簽，比如head和body就是一層的，他們被外面的html套著。這樣的結(jié)構(gòu)很像我們電腦里的文件夾，「我的電腦」是最外面的一層，里面套著CDEF盤(pán)，每個(gè)盤(pán)里又有很多文件夾，文件夾里又有文件夾，最后才是很多具體的文件。
為什么要按照這種結(jié)構(gòu)來(lái)組織呢?其實(shí)就是方便解析和查詢(xún)。解析的時(shí)候，從外到里，循序漸進(jìn)，好比按照?qǐng)D紙蓋房子，先蓋圍墻，再蓋走廊，最后才是臥室。查詢(xún)的時(shí)候，會(huì)有一條明確的路線，比如D盤(pán)-->島國(guó)文化交流-->影視作品-->蒼老師.avi，這樣一層一層的縮小范圍，查找效率會(huì)非常高。
所以，瀏覽器在解析html文檔的時(shí)候，會(huì)把每個(gè)標(biāo)簽抽象成代碼里的對(duì)象，然后按照這種層次分明的結(jié)構(gòu)組織起來(lái)，這就是文檔對(duì)象模型，DOM了。畫(huà)個(gè)圖表示一下就是這樣的：
這就是數(shù)據(jù)結(jié)構(gòu)里典型的「樹(shù)」了。所以大家經(jīng)常說(shuō)DOM樹(shù)，其實(shí)是一個(gè)意思。瀏覽器在解析html的時(shí)候，會(huì)在它的內(nèi)部構(gòu)建這樣一棵DOM樹(shù)，然后按照這棵樹(shù)上的層次順序，依次來(lái)解析每個(gè)標(biāo)簽。標(biāo)簽解析完了，用戶(hù)就看到了網(wǎng)頁(yè)的內(nèi)容。
但是，事情到這里還遠(yuǎn)遠(yuǎn)沒(méi)有結(jié)束，因?yàn)檫€有javascript。瀏覽器解析完了html，然后就要開(kāi)始解析html里的javascript代碼了。我們知道，程序員可以通過(guò)javascript代碼來(lái)實(shí)現(xiàn)一些動(dòng)態(tài)的網(wǎng)頁(yè)效果，比如去服務(wù)器拉取一段數(shù)據(jù)來(lái)展示，再比如說(shuō)做一個(gè)酷炫的動(dòng)畫(huà)效果，這些，都還要用到DOM。
舉個(gè)簡(jiǎn)單的例子，現(xiàn)在javascript想要在網(wǎng)頁(yè)里顯示一行字“this is from
javascript”。要做的第一步，就是找到那個(gè)可以顯示文字的標(biāo)簽。這是非常容易的，因?yàn)闉g覽器已經(jīng)把DOM都交給javascript了。DOM里的對(duì)象，正好就是javascript語(yǔ)言里的對(duì)象。于是，通過(guò)下面的方法，javascript可以修改DOM樹(shù)上的標(biāo)簽對(duì)象。
隨著前端知識(shí)的深入，你會(huì)發(fā)現(xiàn)javascript操縱DOM是非常普遍事情。比如很多網(wǎng)頁(yè)，一開(kāi)始加載出來(lái)只是個(gè)架子，只有一個(gè)loading在轉(zhuǎn)圈，只有等javascript從服務(wù)器上請(qǐng)求到真正的數(shù)據(jù)之后，操縱DOM來(lái)顯示數(shù)據(jù)，才能看到內(nèi)容，這就是典型的異步加載。再比如html5的游戲，里面的人物要隨著手勢(shì)或鼠標(biāo)來(lái)運(yùn)動(dòng)，多半也是javascript操縱DOM改變?cè)氐奈恢脕?lái)實(shí)現(xiàn)的?？梢哉f(shuō)，有了DOM，才使得javascript在前端世界里幾乎無(wú)所不能。
但是，有一點(diǎn)要注意，就是操縱DOM本身是一件效率非常低的事情。因?yàn)橐粋€(gè)網(wǎng)頁(yè)往往是很復(fù)雜的，瀏覽器構(gòu)造出來(lái)的DOM樹(shù)往往也是很龐大的，有的甚至有幾千個(gè)節(jié)點(diǎn)。在這樣龐大的一棵樹(shù)上，進(jìn)行頻繁的改動(dòng)，對(duì)瀏覽器尤其是移動(dòng)瀏覽器來(lái)說(shuō)是一個(gè)不小的工作量，稍一不注意就卡了。
有人就發(fā)明了一種便捷的方法，叫虛擬DOM。簡(jiǎn)單來(lái)說(shuō)就是用javascript又模擬了一棵簡(jiǎn)單的DOM樹(shù)，然后所有的DOM操作都在這上面演練，這個(gè)效率是很高的。等時(shí)機(jī)成熟的時(shí)候，再把虛擬DOM樹(shù)和真正的瀏覽器的DOM樹(shù)做對(duì)比，算出差異，一次性的去改變真正的DOM樹(shù)，這個(gè)效率也很高。經(jīng)過(guò)這兩個(gè)步驟，從整體上大大提高了javascript操縱DOM樹(shù)的效率。
