什么是Dom？

1.簡(jiǎn)介

        文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱(chēng)DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)志語(yǔ)言的標(biāo)準(zhǔn)編程接口。Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰(zhàn)”，雙方為了在JavaScript與JScript一決生死，于是大規(guī)模的賦予瀏覽器強(qiáng)大的功能。微軟在網(wǎng)頁(yè)技術(shù)上加入了不少專(zhuān)屬事物，計(jì)有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網(wǎng)頁(yè)使用非微軟平臺(tái)及瀏覽器無(wú)法正常顯示。DOM即是當(dāng)時(shí)蘊(yùn)釀出來(lái)的杰作。

        DOM（文檔對(duì)象模型）是HTML和XML的應(yīng)用程序接口（API）。DOM將把整個(gè)頁(yè)面規(guī)劃成由節(jié)點(diǎn)層級(jí)構(gòu)成的文檔。

        所謂文檔對(duì)象模型，其實(shí)就是對(duì)網(wǎng)頁(yè)HTML中的各種元素的一種內(nèi)部的表示，例如HTML中的頭、段落、列表、風(fēng)格、ID等，所有的元素都能通過(guò)DOM來(lái)訪問(wèn) 。

        JavaScript最終是要操作Html頁(yè)面，讓Html變成DHtml，而操作Html頁(yè)面就要用到DOM。DOM就是把Html頁(yè)面模擬成一個(gè)對(duì)象，如果JavaScript只是執(zhí)行一些計(jì)算、循環(huán)等操作，而不能操作Html也就失去了它存在的意義。

        DOM就是Html頁(yè)面的模型，將每個(gè)標(biāo)簽都做為一個(gè)對(duì)象，JavaScript通過(guò)調(diào)用DOM中的屬性、方法就可以對(duì)網(wǎng)頁(yè)中的文本框、層等元素進(jìn)行編程控制。比如通過(guò)操作文本框的DOM對(duì)象，就可以讀取文本框中的值、設(shè)置文本框中的值。

2.圖解

關(guān)于window整個(gè)頁(yè)面或者說(shuō)窗口就是一個(gè)window對(duì)象---------------window是頂級(jí)對(duì)象

頁(yè)面中定義的變量和方法都是window的

window.id

document.getElementById()

使用window對(duì)象的屬性、方法的時(shí)候可以省略window。

比如：

window.alert(‘hello');

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

window.document可以直接寫(xiě)document

能不寫(xiě)window就不要寫(xiě)，這樣可以減少js文件的字節(jié)數(shù)。

建議使用window.location.href=‘url';//支持大多數(shù)瀏覽器

動(dòng)態(tài)操作DOM元素

1.獲取DOM

getElementById(), （非常常用），根據(jù)元素的Id獲得對(duì)象，網(wǎng)頁(yè)中id不能重復(fù)。也可以直接通過(guò)元素的id來(lái)引用元素，但是有有效范圍、

getElementsByName()，根據(jù)元素的name獲得對(duì)象，由于頁(yè)面中元素的name可以重復(fù)，比如多個(gè)RadioButton的name一樣，因此getElementsByName返回值是對(duì)象數(shù)組。

getElementsByTagName()，獲得指定標(biāo)簽名稱(chēng)的元素?cái)?shù)組，比如getElementsByTagName(“input”)可以獲得所有的<input>標(biāo)簽。*表示所有標(biāo)簽

2.添加、移除、替換

document.write只能在頁(yè)面加載過(guò)程中才能動(dòng)態(tài)創(chuàng)建。

可以調(diào)用document的createElement方法來(lái)創(chuàng)建具有指定標(biāo)簽的DOM對(duì)象，然后通過(guò)調(diào)用某個(gè)元素的appendChild();方法將新創(chuàng)建元素添加到相應(yīng)的元素下。//父元素對(duì)象.removeChild(子元素對(duì)象);刪除元素。

createElement(‘element');創(chuàng)建一個(gè)節(jié)點(diǎn)

appendChild(node); 追加一個(gè)節(jié)點(diǎn)

removeChild(node);移除一個(gè)節(jié)點(diǎn)

replaceChild(new,old);替換一個(gè)節(jié)點(diǎn)

insertBefore(new,參照);把節(jié)點(diǎn)加到前面（插到某個(gè)節(jié)點(diǎn)前面）

方法：

屬性：

firstChild

lastChild

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

操作頁(yè)面的元素的時(shí)候是用innerHTML的方式還是createElement()、appendChild()與removeChild()的方式？

1.對(duì)于大量進(jìn)行節(jié)點(diǎn)操作時(shí)，使用innerHTML的方式性能要好于頻繁的Dom操作(有專(zhuān)門(mén)用C或C++寫(xiě)的html解析器。)。先將頁(yè)面的HTML代碼寫(xiě)好，然后調(diào)用一次innerHTML,而不要反復(fù)調(diào)用innerHTML.

2.對(duì)于使用innerHTML=‘'的方式來(lái)刪除節(jié)點(diǎn)，在某些情況下會(huì)存在內(nèi)存問(wèn)題。比如：div下面有很多其他元素，每個(gè)元素都綁定有事件處理程序。此時(shí)，innerHTML只是把當(dāng)前元素從節(jié)點(diǎn)樹(shù)上移除了，但是那些事件處理程序依然占用內(nèi)存。

js操作樣式

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

(class是JavaScript的一個(gè)保留字，屬性不能用關(guān)鍵字、保留字所以就變成className了)網(wǎng)頁(yè)開(kāi)關(guān)燈的效果。

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

單獨(dú)修改樣式的屬性使用“style.屬性名”。注意在css中屬性名在JavaScript中操作的時(shí)候?qū)傩悦赡懿灰粯樱饕性谀切傩悦泻?的屬性，因?yàn)镴avaScript中-是不能做屬性、類(lèi)名的。

操作float樣式的時(shí)候

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

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

Form對(duì)象

常用：click(),focus(),blur();//相當(dāng)于通過(guò)程序來(lái)觸發(fā)元素的單擊、獲得焦點(diǎn)以及失去焦點(diǎn)的事件。

form對(duì)象是表單的Dom對(duì)象。

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

實(shí)現(xiàn)autopost，也就是焦點(diǎn)離開(kāi)控件以后頁(yè)面立即提交，而不是只有提交submit按鈕以后才提交，當(dāng)光標(biāo)離開(kāi)的時(shí)候觸發(fā)onblur事件，在onblur中調(diào)用form的submit方法。

在點(diǎn)擊submit后form的onsubmit事件被觸發(fā)，在onsubmit中可以進(jìn)行數(shù)據(jù)校驗(yàn)，如果數(shù)據(jù)有問(wèn)題，返回false即可取消提交

以上所述就是個(gè)人對(duì)于javascript的DOM的理解了，希望大家能夠喜歡。

最新評(píng)論