JavaScript的DOM編程總結

DOM（文檔對象模型）, 與語言無關, 用于操作XML（在Web中）和HTML（在瀏覽器在）文檔的應用程序接口。訪問DOM次數越多, 速度越慢, 費用也就越高。

最小化DOM訪問次數，盡可能在JavaScript端處理。

如果需要多次訪問某個DOM節點，請使用局部變量存儲它的作用。

小心處理html集合，因為它實時系著底層文檔。把集合的長度緩存到一個變量中，并在迭代中使用它。如果需要經常操作集合，建議把他拷貝到一個數組中。

如果可能，請使用速度更快的API，比如querySelectorAll()和firstElementChild()。

重排: 當DOM的變化影響了元素的幾何屬性（高和寬），比如改變邊框寬度或給段落增加文字，導致行數增加，瀏覽器需要重新計算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會因此受到影響。瀏覽器會使渲染樹中受到影響的部分失效，并重新構造渲染樹。這個過程稱為'重排'。

重繪: 完成重排后，瀏覽器會重新繪制受影響的部分到屏幕中，這個過程稱為'重繪'。

要留意重繪和重排；批量修改樣式時，'離線'操作DOM樹，使用緩存，并減少訪問布局信息的次數。

動畫中使用絕對定位，使用拖放代理。

使用事件委托來減少事件處理器的數量。

innerHTML屬性: ducument.getElementById('here').innerHTML()

保準的DOM方法: ducument.createElement()、?ducument。createTextNode()

節點克隆: ducument.cloneNode()

獲取集合:?ducument.getElementByName()

　　　　 ?ducument.getElementByClassName()

　　　　 ?ducument.getElementByTagName()

這個集合對象是一個類似數組的列表， 沒有數組的push和slice方法， 但提供數組中的length屬性，訪問集合元素時使用局部變量

頁面中的所有img元素:?ducument.images

頁面中所有a元素:?ducument.links

頁面中所有表單元素:?ducument.forms

頁面中第一個表單的所有字段:?ducument.forms[0].elements

獲取第一個元素:?ducument.getElementById('div').firstChild

獲取相鄰元素:?ducument.getElementById('div').firstChild.nextSibling

獲取元素集合:?ducument.getElementById('div').childNodes

API只返回元素節點: child 代替 childNodes

　　　　　　　　　 childElementCount?代替 childNodes.length

　　　　　　　　 ? ?firstElementChild?代替 firstChild

　　　　　　　　　 lastElementChild?代替 lastChild

　　　　　　　　　 nextElementChild?代替 nextSibling

　　　　　　　　　 previousElementSibling?代替?previousSibling

選擇器API:?ducument.querySelectorAll('#menu a') <=>?ducument.getElementById('menu').getElementByTagName('a')

class為warning和notice的元素:?ducument.querySelectorAll('div.warning, div.notice')

　　　　　　　　　　　 ? <=> ?var errs=[];

　　　　　　　　　　　　　　 ? divs = doucument.getElementsByTagName('div');

　　　　　　　　　　　　　　 ? className = ''?;

　　　　　　　　　　　　　　 ? for(var i=0; len = divs.length; i<len; i++) {

　　　　　　　　　　　　　　　　 ?className = divs[i].className;

　　　　　　　　　　　　　　　　 ?if (className == 'notice' || className == 'warning') {

　　　　　　　　　　　　　　　　　　errs.push(divs[i]);

　　　　　　　　　　　　　　　　 ?}

　　　　　　　　　　　　　　 ?}

緩存布局信息: current++　　　

　　　　　　 ?mgElement.style.left = current + 'px';

　　　　　　 ?myElement.style.top = current + 'px';

　　　　　　 ?if (current >=500) {

　　　　　　　 　stopAnimation();　　　　　　　

　　　　　　 ?}

? ? ? ? ? ? ? ? ? ? ? ??