JavaScript DOM操作提高篇

做為一個web前端，處理和了解瀏覽器差異一個重要問題.以下將介紹本人在工作中的一些筆記總結，先介紹沒有使用js庫的情況。

　　1.　　setAttribute方法設定元素類別名稱： 在jQuery中，直接使用attr()方法即可，可在原生的JS中

element.setAttribute(class,newClassName) //這個是W3C的標準，在相容W3C標準的瀏覽器中有效，可是，IE才是國內用戶的主旋律
element.setAttribute(className,newClassName) //這樣的設定在IE中才能有效
element.className = newClassName //所有瀏覽器有效(只要支援javascript) 
　　好了，開篇說完了，這篇文章的目的也就是介紹瀏覽器差異的同時使前端的朋友們了解如果用最有效的方法去解決問題，下面繼續。

　　2.　　FireFox沒有window.event對象，只有event對象,IE裡只支持window.event,而其他主流瀏覽器兩者都支持,所以一般寫成：

function handle(e)
{
e = e || event;
...
}
　　3.　　DOMContentLoaded事件原理：對window.onload事件是當頁面解析/DOM樹建立完成，並完成瞭如圖片、腳本、樣式表等所有資源的下載後才觸發的。這對於很多實際的應用程式而言有點太「遲」了，比較影響使用者體驗。為了解決這個問題，FF中便增加了一個DOMContentLoaded方法，與onload相比，該方法觸發的時間更早，它是在頁面的DOM內容加載完成後即觸發，而無需等待其他資源的加載(這個也就是jquery.ready()事件的實作原理)。

//以下是jQuery 1.4.2版本的原始分析

bindReady: function() {
　　if ( readyBound ) {
　　　　〜　　return;　// Catch cases where $(document).ready () is called after the
　　// browser event has already occurred.
　　if ( document.readyState === "complete" ) {
　『 era and webkit nightlies currently support this event
　　if ( document.addEventListener ) {
　　// Use the handy event callback
　　　　document.addadListener( "DOMContentLoaded"　　　document.addetListener( "DOMContentLoaded"　〕　〕〜》 window.onload, that will always work
　　　　window.addEventListener ( "load", jQuery.ready, false );
　　　　// If IE event model is used
　　} else if ( document.attachEvent ) {　// maybe late but safe also for iframes
docQuument.attachEvent("onreadystatechange", DOMContentLoaded);
　　　　// A fallback to window.onload, that will always work
　　　　window. and not a frame
　　　　/ / continually check to see if the document is ready
　　　　var toplevel = false;
　　　　try {
　　〕　　　　try {🀝　　腳　atch(e) {}
　　　　if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
　　　　}
　　}
} 
　　設計思路- 將Webkit與Firefox同等對待，都是直接註冊才存在的兼容性。對於IE，先註冊document的onreadystatechange事件，經過測試，該方式與window.onload相當，依然會等到所有資源下載完畢後才觸發。之後，判斷如果是IE且頁面不在iframe當中，則透過setTiemout來不斷的呼叫documentElement的doScroll方法，直到呼叫成功則出觸發DOMContentLoaded。 1 jQuery對於IE的解決方案的原理是，在IE下，DOM的某些方法只有在DOM解析完成後才可以調用，doScroll就是這樣一個方法，反過來當能調用doScroll的時候即是DOM解析完成之時，與prototype中的document.write相比，此方案可以解決頁面有iframe時失效的問題。此外，jQuery似乎擔心當頁面處於iframe中時，該方法會失效，因此實現程式碼中做了判斷，如果是在iframe中則透過document的onreadystatechange來實現，否則透過doScroll來實現。不過經過測試，即使在iframe中，doScroll依然有效。

　　4.　　學會使用IE的條件註釋。許多前端總是在抱怨萬惡的IE,確實,處理兼容性的問題確實會越來越噁心,可是沒有辦法,既然沒有辦法改變,那麼請享受...

　　今天就先總結到這裡吧，下週收假回來有時間發高級AJAX篇，希望能對新手或有需要的人有所幫助.由於文筆有限，寫的不好也請見諒，這個剛開始寫博客，成長階段嘛。哈哈...