原生JavaScript下的DOM操作介紹

發(fā)布時間：2021-09-17 11:04:44 來源：億速云閱讀：144 作者：chen 欄目：開發(fā)技術(shù)

這篇文章主要介紹“原生JavaScript下的DOM操作介紹”，在日常操作中，相信很多人在原生JavaScript下的DOM操作介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”原生JavaScript下的DOM操作介紹”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

1. setAttribute方法設(shè)置元素類名

在jQuery中，直接使用attr()方法即可，可在原生的JS中，

`1`	`//這個是W3C的標(biāo)準(zhǔn)，在兼容W3C標(biāo)準(zhǔn)的瀏覽器中有效，可是，IE才是國內(nèi)用戶的主旋律`

`2`	`element.setAttribute('class','newClassName')`

`3`	`//這樣的設(shè)置在IE中才能有效`

`4`	`element.setAttribute('className','newClassName')`

`5`	`//所有瀏覽器有效(只要支持javascript)`

`6`	`element.className =` `'newClassName'`

好了，開篇說完了，這篇文章的目的也就是介紹瀏覽器差異的同時使前端的朋友們了解如果用最有效的方法去解決問題，下面繼續(xù)。

2. FireFox沒有window.event對象

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

`1`	`function` `handle(e)`

2 {

`3`	`e = e \|\| event;`

4 ...

5 }

3. DOMContentLoaded事件原理

對window.onload事件是當(dāng)頁面解析/DOM樹建立完成，并完成了如圖片、腳本、樣式表等所有資源的下載后才觸發(fā)的。這對于很多實際的應(yīng)用而言有點太"遲"了，比較影響用戶體驗。為了解決這個問題，F(xiàn)F中便增加了一個DOMContentLoaded方法，與onload相比，該方法觸發(fā)的時間更早，它是在頁面的DOM內(nèi)容加載完成后即觸發(fā)，而無需等待其他資源的加載(這個也就是jquery.ready()事件的實現(xiàn)原理)。

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

`02`	`bindReady:` `function() {`

`03`	`if` `( readyBound ) {`

04 　　　　return;

05 　　}

`06`	`readyBound =` `true;`

`07`	`// Catch cases where $(document).ready() is called after the`

`08`	`// browser event has already occurred.`

`09`	`if` `( document.readyState ===` `"complete"` `) {`

`10`	`return` `jQuery.ready();`

11 　　}

`12`	`// Mozilla, Opera and webkit nightlies currently support this event`

`13`	`if` `( document.addEventListener ) {`

`14`	`// Use the handy event callback`

`15`	`document.addEventListener(` `"DOMContentLoaded", DOMContentLoaded,` `false` `);`

`16`	`// A fallback to window.onload, that will always work`

`17`	`window.addEventListener(` `"load", jQuery.ready,` `false` `);`

`18`	`// If IE event model is used`

`19`	`}` `else` `if` `( document.attachEvent ) {`

`20`	`// ensure firing before onload,`

`21`	`// maybe late but safe also for iframes`

`22`	`document.attachEvent("onreadystatechange", DOMContentLoaded);`

`23`	`// A fallback to window.onload, that will always work`

`24`	`window.attachEvent(` `"onload", jQuery.ready );`

`25`	`// If IE and not a frame`

`26`	`// continually check to see if the document is ready`

`27`	`var` `toplevel =` `false;`

28 　　　　try {

`29`	`toplevel = window.frameElement ==` `null;`

`30`	`}` `catch(e) {}`

`31`	`if` `( document.documentElement.doScroll && toplevel ) {`

`32`	`doScrollCheck();`

33 　　　　}

34 　　}

35 }

設(shè)計思路 - 將Webkit與Firefox同等對待，都是直接注冊DOMContentLoaded事件，但是由于Webkit是在525以上版本才引入的，因此存在兼容性的隱患。對于IE，首先注冊document的onreadystatechange事件，經(jīng)測試，該方式與window.onload相當(dāng)，依然會等到所有資源下載完畢后才觸發(fā)。之后，判斷如果是IE并且頁面不在iframe當(dāng)中，則通過setTiemout來不斷的調(diào)用documentElement的doScroll方法，直到調(diào)用成功則出觸發(fā)DOMContentLoaded。1
jQuery對于IE的解決方案的原理是，在IE下，DOM的某些方法只有在DOM解析完成后才可以調(diào)用，doScroll就是這樣一個方法，反過來當(dāng)能調(diào)用doScroll的時候即是DOM解析完成之時，與prototype中的document.write相比，該方案可以解決頁面有iframe時失效的問題。此外，jQuery似乎擔(dān)心當(dāng)頁面處于iframe中時，該方法會失效，因此實現(xiàn)代碼中做了判斷，如果是在iframe中則通過document的onreadystatechange來實現(xiàn)，否則通過doScroll來實現(xiàn)。不過經(jīng)測試，即使是在iframe中，doScroll依然有效。

4. 學(xué)會使用IE的條件注釋

許多前端總是在抱怨萬惡的IE,確實,處理兼容性的問題確實會越來越惡心,可是沒有辦法,既然沒有辦法改變,那么請享受...

`01`	`<!--[if IE]>`

`02`	`<h2>您正在使用IE瀏覽器</h2>`

`03`	`<![endif]-->`

`04`	`<!--[if IE 5]>`

`05`	`<h2>版本 5</h2>`

`06`	`<![endif]-->`

`07`	`<!--[if IE 5.0]>`

`08`	`<h2>版本 5.0</h2>`

`09`	`<![endif]-->`

`10`	`<!--[if IE 5.5]>`

`11`	`<h2>版本 5.5</h2>`

`12`	`<![endif]-->`

`13`	`<!--[if IE 6]>`

`14`	`<h2>版本 6</h2>`

`15`	`<![endif]-->`

`16`	`<!--[if IE 7]>`

`17`	`<h2>版本 7</h2>`

到此，關(guān)于“原生JavaScript下的DOM操作介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細(xì)節(jié)

原生JavaScript下的DOM操作介紹

1. setAttribute方法設(shè)置元素類名

2. FireFox沒有window.event對象

3. DOMContentLoaded事件原理

4. 學(xué)會使用IE的條件注釋

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽