目錄：

1什么是dom

DOM--文檔對(duì)象模型；dom可以以一種獨(dú)立于平臺(tái)和語言的方式訪問和修改一格 文檔的內(nèi)容和結(jié)構(gòu)

DOM 是 W3C（萬維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)。

"W3C 文檔對(duì)象模型 （DOM） 是中立于平臺(tái)和語言的接口，它允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。"

XML DOM 是用于獲取、更改、添加或刪除 XML 元素的標(biāo)準(zhǔn)。

dom的級(jí)別

1級(jí)dom--DOM核心能映射以XML為基礎(chǔ)的文檔結(jié)構(gòu)，允許獲取和操作文檔的任意部分。

2級(jí)dom--過對(duì)象接口增加了對(duì)鼠標(biāo)和用戶界面事件（DHTML長期支持鼠標(biāo)與用戶界面事件）、范圍、遍歷（重復(fù)執(zhí)行DOM文檔）和層疊樣式表（CSS）的支持

dom優(yōu)點(diǎn)和缺點(diǎn)：

優(yōu)勢(shì)：易用性強(qiáng)，遍歷簡單

缺點(diǎn)：效率低，解析速度慢，內(nèi)存占用量過高，對(duì)于大文件不可以使用！消耗時(shí)間久，DOM機(jī)制中所運(yùn)用的大量對(duì)象的創(chuàng)建和銷毀無疑會(huì)影響其效率。

解決方案：

DOM訪問和操作是現(xiàn)代網(wǎng)頁應(yīng)用中很重要的一部分。但每次你通過“橋梁”從ECMAScript到DOM時(shí)，都會(huì)被收取“過路費(fèi)”。為減少DOM編程中的性能損失！

一.最小號(hào)dom訪問在js端做精可能多的是

function innerHTMLLoop2() { var content = ''; for (var count = 0; count < 15000; count++) { content += 'a';

} document.getElementById('here').innerHTML += content;}

二。在反復(fù)訪問的地方使用局部變量存放DOM引用。

三。小心地處理HTML集合，因?yàn)樗麄儽憩F(xiàn)出“存在性”，總是對(duì)底層文檔重新查詢。將集合length屬性緩存到一個(gè)變量中，在迭代中使用這個(gè)變。如果經(jīng)常操作這個(gè)集合，可以將集體拷貝到數(shù)組中。

四?？赡艿脑?，使用速度更快的API，諸如querySelectorAll()和firstElementChild。

下列瀏覽器支持選擇器API：Internet Explorer 8，F(xiàn)irefox 3.5，Safari 3.1，Chrome 1，Opera

五。注重重繪和重排版：批量修改風(fēng)格，離線操作DOM樹，緩存并減少對(duì)布局信息的訪問。

)批量修改

重排版和重繪代價(jià)昂貴，所以，提高程序響應(yīng)速度一個(gè)好策略是減少此類操作發(fā)生的機(jī)會(huì)。為減少發(fā)生

次數(shù)，你應(yīng)該將多個(gè)DOM 和風(fēng)格改變合并到一個(gè)批次中一次性執(zhí)行。

六。動(dòng)畫中使用絕對(duì)坐標(biāo)，使用拖放代理。

七。使用事件托管技術(shù)最小化事件句柄數(shù)量。

?

2.dom tree--

1用來與html等網(wǎng)絡(luò)文檔元素交互而引入的提供API

2.? DOMtree不是網(wǎng)頁瀏覽器必要的，而是為了jsp而做的。（如果沒有jsp，可以不需要建立DOMtree也能渲染整個(gè)頁面）

?

3,節(jié)點(diǎn)的屬性

?

nodeType 屬性可返回節(jié)點(diǎn)的類型。

最重要的節(jié)點(diǎn)類型是：

元素類型節(jié)點(diǎn)類型元素1屬性2文本3注釋8文檔9

4.元素對(duì)象的方法和屬性相關(guān)的方法

Js節(jié)點(diǎn)屬性與方法

屬性：

5.訪問節(jié)點(diǎn)：--通過不同的方法查找希望操作的元素

document.getaELementById(id)

document.getElementsByTagName()

document.getElementsByName();

document.getElementsByClassName();

document.querySelector
document.querySelectorAll 優(yōu)點(diǎn)是查找快，缺點(diǎn)兼容性差

querySelector 和 querySelectorAll 方法是 W3C Selectors API 規(guī)范中定義的。他們的作用是根據(jù) CSS 選擇器規(guī)范，便捷定位文檔中指定元素。

querySelector 和 querySelectorAll 方法很好用，可惜IE6、IE7不支持，怎么讓IE6、IE7也支持querySelectorAll和querySelector這兩個(gè)方法呢，

DOM2級(jí)樣式規(guī)范為style定義了一些屬性和方法

屬性或方法

說明

cssText

訪問或設(shè)置style中的CSS代碼

length

CSS屬性的數(shù)量

parentRule

CSS信息的CSSRule對(duì)象

getPropertyCSSValue(name)

返回包含給定屬性值的CSSValue對(duì)象

getPropertyPriority(name)

如果設(shè)置了!important，則返回，否則返回空字符串

item(index)

返回指定位置CSS屬性名稱

removeProperty(name)

從樣式中刪除指定屬性

setProperty(name,v,p)

給屬性設(shè)置為相應(yīng)的值，并加上優(yōu)先權(quán)