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

這一夜看的我是頭疼不已啊，爲何呢？

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

只是一夜也不是毫無收穫，先記錄下臨時本身的理解，可能存在誤差，隨着以後應用的增多慢慢理解吧，先烙個印再說。

一、DOM它是什麼？

最直接的回答：「Document Object Model」的縮寫，簡稱「文檔對象模型」，聽到這種回答真是讓人抓狂啊，但是，不得不說它是正確的。

最專業的回答：W3C對DOM的定義是-----它 是中立於平臺和語言的接口，程序和腳本可以經過這個接口動態的訪問和改動文檔的內容、結構和樣式。

最簡練的回答：一種API，應用編程接口

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

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

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

二、DOM是怎樣進行改變的？

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

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

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

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

* 元素節點 ： html標籤 

* 文本節點 ：文本

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

* 凝視節點 ：凝視都是一類，分的果真很是細，不放過一條活魚的樣子

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

三、DOM的初印象

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

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

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

* 事實上另外一個是對頁面改變的監聽，window.onload/onchange/等等

四、DOM的增刪改查

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

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

而改的就 更簡單了，在前面之前作過的更改頁面背景顏色，甚至改變引入樣式，改變標籤內容等，都是DOM的改，它主要包含例如如下幾個方面：一、改變html內容；二、改變CSS樣式；三、改變html屬性；四、改變事件（處理程序）

而增和刪就是最近才掌握學習的，createElement（「div」）是否是很是熟悉，是的，咱們已經用過很是屢次了，固然節點還不只僅這一種，咱們還可以變通，僅僅要不要忘記最後的appendChild（），而刪就更easy理解了，在哪就從哪裏剔除掉，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>你知道怎麼寫了麼

五、怎樣加快DOM的執行速度

事實上我現在寫這個有點牽強，因爲我沒有實際應用測試過，但是感受是有道理的，就在這裏一塊說下：

首先，爲何會存在DOM的執行速度問題？

DOM的改動會嚴重影響網頁的用戶界面，需要又一次繪製頁面，也就說需要瀏覽器進行又一次解析，而爲了確保運行效果的準確性，所有改動操做是按順序同步運行的，也就是所說的「迴流」，因爲需要又一次從頭運行，因此性能上確定要收到影響。咱們沒法改變這樣的現狀，僅僅能有意有效的去下降它的負擔，避免更能多的影響因素。

而後，咱們來看看，那些操做可以呢？

一、經過類名切換來改動DOM

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

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

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

document.getElementById("").classname=cc;這裏僅僅需要執行一次就能夠

二、一次性DOM元素生成

var e=document.createElement("");

body.appendChild(e);

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

而咱們可以去作的僅僅是將二三句進行顛倒就能夠

var e=document.createElement("");

e.innerHTML="haha";

body.appendChild(e);--一次就能夠

三、還有個就是文檔片斷記錄

function show(element){

var a;

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

var e=document.createElement("");

e.innerHTML="haha";

body.appendChild(e)

}

};----這可是一個浩大的project，需要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，畢竟這三部分是一個整體，整合起來看的話會有不小的驚喜吧，今天就先到這裏了，啊，又晚了，睡覺