淺析javascript中的DOM

淺析javascript中的DOM

　　本文主要給大家簡單介紹了是什麼是DOM、動態操作DOM元素的方法、使用jsjs操作樣式以及Form對象的簡介，是個人對於javascript中的DOM的理解的總結，推薦給小夥伴們。

　　什麼是Dom?

　　1.簡介

　　文件物件模型(Document Object Model，簡稱DOM)，是W3C組織推薦的處理可擴充標誌語言的標準編程介面。Document Object Model的曆史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平台及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作。

　　DOM(文件物件模型)是HTML和XML的應用程式介面(API)。DOM將把整個頁面規劃成由節點層級構成的文檔。

　　所謂文件物件模型，其實就是對網頁HTML中的各種元素的一種內部的表示，例如HTML中的頭、段落、列表、風格、ID等，所有的元素都能通過DOM來訪問 。

　　JavaScript最終是要操作Html頁面，讓Html變成DHtml，而操作Html頁面就要用到DOM。DOM就是把Html頁面類比成一個對象，如果JavaScript只是執行一些計算、迴圈等操作，而不能操作Html也就失去了它存在的意義。

　　DOM就是Html頁面的模型，將每個標籤都做為一個對象，JavaScript通過調用DOM中的屬性、方法就可以對網頁中的文字框、層等元素進行編程式控制制。比如通過操作文字框的DOM對象，就可以讀取文字框中的值、設定文字框中的值。

　　2.圖解

　　關於window整個頁面或者說視窗就是一個window對象---------------window是頂級對象

　　頁面中定義的變數和方法都是window的

　　window.id

　　document.getElementById()

　　使用window對象的屬性、方法的時候可以省略window。

　　比如：

　　window.alert(‘hello');

　　可以省略成alert(‘hello');

　　window.document可以直接寫document

　　能不寫window就不要寫，這樣可以減少js檔案的位元組數。

　　複製代碼 代碼如下:

　　window.alert(‘大家好!');//彈出警告對話方塊

　　window.confirm(‘確定要刪除嗎?');//確定、取消對話方塊，返回true或false;

　　window.navigate(url);//將網頁重新導航到url,支援IE、Opera11.6。並不推薦,有些瀏覽器不行,

　　建議使用window.location.href=‘url';//支援大多數瀏覽器

　　動態操作DOM元素

　　1.擷取DOM

　　getElementById(), (非常常用)，根據元素的Id獲得對象，網頁中id不能重複。也可以直接通過元素的id來引用元素，但是有有效範圍、

　　getElementsByName()，根據元素的name獲得對象，由於頁面中元素的name可以重複，比如多個RadioButton的name一樣，因此getElementsByName傳回值是對象數組。

　　getElementsByTagName()，獲得指定標籤名稱的元素數組，比如getElementsByTagName(“input”)可以獲得所有的標籤。*表示所有標籤

　　2.添加、移除、替換

　　document.write只能在頁面載入過程中才能動態建立。

　　可以調用document的createElement方法來建立具有指定標籤的DOM對象，然後通過調用某個元素的appendChild();方法將新建立元素添加到相應的元素下。//父元素對象.removeChild(子項目對象);刪除元素。

　　createElement(‘element');建立一個節點

　　appendChild(node); 追加一個節點

　　removeChild(node);移除一個節點

　　replaceChild(new,old);替換一個節點

　　insertBefore(new,參照);把節點加到前面(插到某個節點前面)

　　方法：

　　屬性：

　　firstChild

　　lastChild

　　3.用innerHTML還是createElement()、appendChild()與removeChild()?

　　操作頁面的元素的時候是用innerHTML的方式還是createElement()、appendChild()與removeChild()的方式?

　　1.對於大量進行節點操作時，使用innerHTML的方式效能要好於頻繁的Dom操作(有專門用C或C++寫的html解析器。)。先將頁面的HTML代碼寫好，然後調用一次innerHTML,而不要反覆調用innerHTML.

　　2.對於使用innerHTML=‘'的方式來刪除節點，在某些情況下會存在記憶體問題。比如：div下面有很多其他元素，每個元素都綁定有事件處理常式。此時，innerHTML只是把當前元素從節點樹上移除了，但是那些事件處理常式依然佔用記憶體。

　　js操作樣式

　　修改元素的樣式是className屬性。

　　(class是JavaScript的一個保留字，屬性不能用關鍵字、保留字所以就變成className了)網頁開關燈的效果。

　　修改元素的樣式不能this.style="background-color:Red"。

　　單獨修改樣式的屬性使用“style.屬性名稱”。注意在css中屬性名稱在JavaScript中操作的時候屬性名稱可能不一樣，主要集中在那些屬性名稱中含有-的屬性，因為JavaScript中-是不能做屬性、類名的。

　　操作float樣式的時候

　　IE:obj.style.styleFloat=‘right';

　　其他瀏覽器：obj.style.cssFloat=‘right';

　　Form對象

　　常用：click(),focus(),blur();//相當於通過程式來觸發元素的單擊、獲得焦點以及失去焦點的事件。

　　form對象是表單的Dom對象。

　　方法：submit()提交表單，但是不會觸發onsubmit事件。

　　實現autopost，也就是焦點離開控制項以後頁面立即提交，而不是只有提交submit按鈕以後才提交，當游標離開的時候觸發onblur事件，在onblur中調用form的submit方法。

　　在點擊submit後form的onsubmit事件被觸發，在onsubmit中可以進行資料校正，如果資料有問題，返回false即可取消提交

 

　　以上所述就是個人對於javascript的DOM的理解了，希望大家能夠喜歡。