溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“原生JavaScript下的DOM操作介紹”，在日常操作中，相信很多人在原生JavaScript下的DOM操作介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”原生JavaScript下的DOM操作介紹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
在jQuery中，直接使用attr()方法即可，可在原生的JS中，
1 | //這個是W3C的標準，在兼容W3C標準的瀏覽器中有效，可是，IE才是國內用戶的主旋律 |
2 | element.setAttribute('class','newClassName') |
3 | //這樣的設置在IE中才能有效 |
4 | element.setAttribute('className','newClassName') |
5 | //所有瀏覽器有效(只要支持javascript) |
6 | element.className'newClassName' |
好了，開篇說完了，這篇文章的目的也就是介紹瀏覽器差異的同時使前端的朋友們了解如果用最有效的方法去解決問題，下面繼續。
FireFox沒有window.event對象，只有event對象,IE里只支持window.event,而其他主流瀏覽器兩者都支持,所以一般寫成：
1 | function handle(e) |
2 | { |
3 | e |
4 | ... |
5 | } |
對window.onload事件是當頁面解析/DOM樹建立完成，并完成了如圖片、腳本、樣式表等所有資源的下載后才觸發的。這對于很多實際的應用而言有點太"遲"了，比較影響用戶體驗。為了解決這個問題，FF中便增加了一個DOMContentLoaded方法，與onload相比，該方法觸發的時間更早，它是在頁面的DOM內容加載完成后即觸發，而無需等待其他資源的加載(這個也就是jquery.ready()事件的實現原理)。
01 | //以下是jQuery |
02 | bindReady: function() |
03 | if ( |
04 | return; |
05 | } |
06 | readyBoundtrue; |
07 | // |
08 | // |
09 | if ("complete" ) |
10 | return jQuery.ready(); |
11 | } |
12 | // |
13 | if ( |
14 | // |
15 | document.addEventListener( "DOMContentLoaded",false ); |
16 | // |
17 | window.addEventListener( "load",false ); |
18 | // |
19 | } else if ( |
20 | // |
21 | // |
22 | document.attachEvent("onreadystatechange", |
23 | // |
24 | window.attachEvent( "onload", |
25 | // |
26 | // |
27 | var toplevelfalse; |
28 | try { |
29 | toplevelnull; |
30 | } catch(e) |
31 | if ( |
32 | doScrollCheck(); |
33 | } |
34 | } |
35 | } |
設計思路 - 將Webkit與Firefox同等對待，都是直接注冊DOMContentLoaded事件，但是由于Webkit是在525以上版本才引入的，因此存在兼容性的隱患。 對于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依然有效。
許多前端總是在抱怨萬惡的IE,確實,處理兼容性的問題確實會越來越惡心,可是沒有辦法,既然沒有辦法改變,那么請享受...
01 | <!--[if |
02 | <h2>您正在使用IE瀏覽器</h2> |
03 | <![endif]--> |
04 | <!--[if |
05 | <h2>版本 |
06 | <![endif]--> |
07 | <!--[if |
08 | <h2>版本 |
09 | <![endif]--> |
10 | <!--[if |
11 | <h2>版本 |
12 | <![endif]--> |
13 | <!--[if |
14 | <h2>版本 |
15 | <![endif]--> |
16 | <!--[if |
17 | <h2>版本 |
到此，關于“原生JavaScript下的DOM操作介紹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
