javascript DOM,它究竟是什麼-------Day32

這一晚上看的我是頭疼不已啊，為什麼呢？

終究是半路出家，我對javascript的理解只停留在：調用javascript，改變頁面樣式，元素和實現一些事件的響應，雖然需要的時候可能會用，但是究竟使用的原理卻不是很明白，至於DOM，這麼專業的詞彙，還是省省吧。

不過一晚上也不是毫無收穫，先記錄下暫時自己的理解，可能存在偏差，隨著之後應用的增多慢慢理解吧，先烙個印再說。

1、DOM它是什嗎？

最直接的回答：“Document Object Model”的縮寫，簡稱“文件物件模型”，聽到這樣的回答真是讓人抓狂啊，但是，不得不說它是正確的。

最專業的回答：W3C對DOM的定義是-----它 是中立於平台和語言的介面，程式和指令碼可以通過這個介面動態訪問和修改文檔的內容、結構和樣式。

最簡練的回答：一種API，應用編程介面

毫無疑問，上面的回答都是正確的，而且我們還能提煉出幾個要點：1、一種應用介面；2、對文檔的操作，在我看來，這大抵就是它的核心了，這樣我們來試著通俗的解釋下，看看能不能更簡單、更直觀的瞭解這種概念

在上一篇文章中，提到了javascript可以分成三部分：ECMAscript、DOM、BOM，然後又簡單描述了下ECMAscript：定義了變數來存不同資料類型的值，定義了運算子來對值進行操作，將值的改變和運算子的操作過程合成語句，或者用語句拼接一些完整的方法等等，但是就這樣擺著，方法是有了，可沒見過說明書可以自己操作機器的，我們要想真正實現動態化和互動性，就必須將他們整合，而這種將html（或者html5）、css和javascript凝聚在一起的就是DOM。

這樣我們再來回味上面的三種回答，它是將文檔內事物都整合起來作為一個大的對象進行操作的；至於改變文檔內的內容，javascript則是來訪問這個文檔的入口，而舉個不恰當的例子，桌上一桌豐盛的菜，你最需要的是什麼，是一套餐具，人用餐具吃飯，這已經成了一個標準，不管你吃的是那個菜，不管是你在吃還是他在吃，手扒的倒是可以排除在外，而javascript就是那個媒介，那個通道....

2、DOM是如何進行改變的？

這個總是各個介紹中大篇幅闡述的，看的多了，理解的也就容易些，這樣我們先來看看這幅神圖：

嗯，就是這樣，DOM將整個文檔打散，分成一個模組一個模組的散件，裡面的任意一個事物你都可以單獨將它取出來，這就是它的策略，分而治之。

這樣來讓我們看看，它把他都分成了什麼：（還記得什麼是網頁麼，html標籤 + 文本）

* 文檔節點 ：這就是整個文檔，就是一個網頁

* 元素節點 ： html標籤 

* 文本節點 ：文本

* 屬性節點 ：html標籤的屬性

* 注釋節點 ：注釋都是一類，分的果然很細，不放過一條活魚的樣子

至於根節點、父節點、子節點和同胞的區別，就不詳說了，這個社會，誰還能分不清誰是誰啊。

3、DOM的初印象

你對DOM的初印象是什麼，我不知道，我的初印象是對事件的響應，既然是實現動態，能夠互動，就必須要能監聽事件，或者滑鼠的，或者鍵盤的，這就是我最初的概念，當然這很片面，但是這一點會你是始終忘不掉的，簡單想想會有哪些事件需要監聽呢：

* onclick/onmouseover/onblur/甚至單擊、雙擊、右鍵、長按的滑鼠操作，足夠單獨整理一篇的

* 監聽鍵盤（不同按鍵對應的編碼，難道真的要背麼..）

* 其實還有一個是對頁面改變的監聽，window.onload/onchange/等等

4、DOM的增刪改查

碰到資料處理，慣性的就是考慮增刪改查，不得不說，這應該算的上一個好習慣。我們最常見、使用頻率最高的應該是查和改。

查的方法通常有三種：getElementById、getElementByTagName、getElementByNames，因為id的唯一性，通過id來定位查詢是最快最常用的，而後兩種則是擷取集合類型，批量擷取的好方法，tagname用來擷取相同標籤的同類元素，而classname則可以自由定義，更便於特選部分，而非全部，當然classname還存在它最大的問題就是相容性，萬惡的ie。

而改的就 更簡單了，在前面曾經做過的更改頁面背景顏色，甚至改變引入樣式，改變標籤內容等，都是DOM的改，它主要包括如下幾個方面：1、改變html內容；2、改變CSS樣式；3、改變html屬性；4、改變事件（處理常式）

而增和刪就是近期才掌握學習的，createElement（“div”）是不是很熟悉，是的，我們已經用過很多次了，當然節點還不只這一種，我們還可以變通，只要不要忘記最後的appendChild（），而刪就更容易理解了，在哪就從哪裡剔除掉，removeChild（），“縣官不如現管”在這裡體現的淋漓盡致，當然前面的改也可以通過replaceChild來整體修改，就不再多說了。

這裡其實有個最明顯，最常用，而我們卻很少去思考的一個最鮮活的例子，我們來分析下，加深下印象：

<script type="text/javascript">function show(){alert("haha");}</script>

是不是非常的熟悉，沒辦法，生活就是這樣，總在不經意間讓你感覺到無盡的智慧。我們來寫一下它的DOM代碼

var script = document.createElement("script");script.type = "text/javascript";script.text = "function show(){alert('haha');}";document.body.appendChild(script);

這樣的話<script type="text/javascript" src=""></script>你知道怎麼寫了麼

5、如何加快DOM的運行速度

其實我現在寫這個有點牽強，因為我沒有實際應用測試過，但是感覺是有道理的，就在這裡一塊說下：

首先，為什麼會存在DOM的運行速度問題？

DOM的修改會嚴重影響網頁的使用者介面，需要重新繪製頁面，也就說需要瀏覽器進行重新解析，而為了確保執行效果的準確性，所有修改操作是按順序同步執行的，也就是所說的“迴流”，因為需要重新從頭執行，所以效能上肯定要收到影響。我們無法改變這種現狀，只能有意有效去減少它的負擔，避免更能多的影響因素。

然後，我們來看看，那些操作可以呢？

1、通過類名切換來修改DOM

document.getElementById("").style.color=cyan;

document.getElementById("").style.width=100px;每一個改變都要進行重析，需要運行兩次

我們完全可以寫成.cc{style:cyan;width:100px;}

document.getElementById("").classname=cc;這裡只需要運行一次即可

2、一次性DOM元素產生

var e=document.createElement("");

body.appendChild(e);

e.innerHTML="haha";---兩次重析

而我們可以去做的只是將二三句進行顛倒即可

var e=document.createElement("");

e.innerHTML="haha";

body.appendChild(e);--一次即可

3、還有個就是文檔片段記錄

function show(element){

var a;

for(var i=0;i<10;i++){

var e=document.createElement("");

e.innerHTML="haha";

body.appendChild(e)

}

};----這可是一個浩大的工程，需要10次重析

而我們通過文檔片段記錄，則有效減短了時間

function show(element){

var a,f=document.createDocumentFragment();

for(var i=0;i<10;i++){

var e=document.createElement("");

e.innerHTML="haha";

f.appendChild(e);

}

body.appendChild(f);

}

我理解的DOM，暫時是這樣一個架構，接下來還需要看BOM，畢竟這三部分是一個整體，整合起來看的話會有不小的驚喜吧，今天就先到這裡了，啊，又晚了，睡覺