編寫跨瀏覽器的javascript代碼必備[js多瀏覽器兼容寫法]
|
序號(hào) |
操作 |
分類 |
IE |
FireFox |
Mozilla |
當(dāng)前 |
備注 |
|
1 |
"." |
訪問tag的固有屬性 |
OK |
OK |
OK |
OK |
|
|
2 |
"." |
訪問tag的用戶定義屬性 |
OK |
NO |
NO |
OK |
可以用getAttribute函數(shù) 替代 |
|
3 |
obj.getAttribute |
訪問tag的固有屬性 |
OK |
OK |
OK |
OK |
|
|
4 |
obj.getAttribute |
訪問tag的用戶定義屬性 |
OK |
OK |
OK |
OK |
|
|
5 |
document.all |
訪問document的所有子元素 |
OK |
OK |
NO |
OK |
建議用childNodes對(duì)象或者getElementById函數(shù)實(shí)現(xiàn)對(duì)應(yīng)操作。 |
|
6 |
obj.all |
訪問非document元素的所有子元素 |
OK |
NO |
NO |
OK |
同上 |
|
7 |
根據(jù)元素的id/name來取得元素。 |
OK |
NO |
NO |
OK |
注意:很多元素是沒有name屬性的,eg: td, div,span... | |
|
8 |
變量名 = "" |
隱式定義變量-通過向變量名附值方式定義一個(gè)新的變量。 |
OK |
OK |
OK |
OK |
建議:為避免必要的麻煩,顯示定義變量。 |
|
9 |
id |
通過id直接調(diào)用對(duì)象 |
OK |
OK |
NO |
OK |
eval()函數(shù)用來執(zhí)行腳本,所以向eval函數(shù)里面?zhèn)魅雽?duì)象id/name的話,IE同樣會(huì)返回對(duì)象的引用。 |
|
10 |
name |
通過name直接調(diào)用對(duì)象 |
OK |
NO |
NO |
OK |
同上/ 原因同7 |
|
11 |
name |
支持的特殊字符("!",".","@","#","$","<",...) |
NO |
OK |
OK |
NO |
其它的字符沒有測(cè)試 |
|
12 |
tr.innerHTML = "" |
設(shè)置TR元素的內(nèi)部HTML腳本 |
NO |
OK |
OK |
NO |
在IE中,table、tr的innerHTML是只讀屬性,不能夠?qū)ζ渲苯釉O(shè)置??梢酝ㄟ^insertRow/insertCell函數(shù)進(jìn)行設(shè)置。 |
|
13 |
cells對(duì)象訪問 |
訪問tr的cells對(duì)象 |
NO |
OK |
OK |
undefined |
可以將其插入Table再訪問,或者可以用getElementsByTagName函數(shù) 對(duì)td/th訪問。 |
|
14 |
(index) |
訪問集合類對(duì)象 |
OK |
NO |
NO |
OK |
建議用正式的操作符"[]". |
|
15 |
obj.toString() |
取得對(duì)象的字符串"[object 對(duì)象類型的名稱]". |
NO |
OK |
OK |
NO |
可以省略toString()函數(shù),直接用對(duì)象來操作。 |
|
16 |
obj.class |
定義對(duì)象的css式樣/風(fēng)格。 |
NO |
OK |
NO |
- |
無法寫測(cè)試代碼,會(huì)有編譯錯(cuò)誤!可以自己用typeof(class) == null來測(cè)試一下,沒有異常就在代碼中可以使用。 |
|
17 |
const |
保留關(guān)鍵字,用于定義常量。 |
NO |
OK |
OK |
- |
暫時(shí)只能不使用const。 |
|
18 |
input.type |
變更input元素的類型 |
NO |
OK |
OK |
NO |
IE可以初始input元素類型,但是不能變更類型。 |
|
19 |
obj.children |
訪問對(duì)象的子元素集合 |
OK |
NO |
NO |
OK |
可以用childNodes對(duì)象替代。 |
|
20 |
node.replaceNode |
替換新的節(jié)點(diǎn)對(duì)象 |
OK |
NO |
NO |
OK |
可以用replaceChild函數(shù)替換。 |
|
21 |
node.removeNode |
刪除已有節(jié)點(diǎn)對(duì)象 |
OK |
NO |
NO |
OK |
可以用oldNode.parentNode.removeChild(oldNode)方式實(shí)現(xiàn)。 |
|
22 |
node.insertBefore |
在指定節(jié)點(diǎn)對(duì)象前面插入一個(gè)節(jié)點(diǎn)對(duì)象 |
OK |
OK |
OK |
OK |
|
|
23 |
obj.parentElement |
訪問對(duì)象的父元素 |
OK |
NO |
NO |
OK |
可以用parentNode對(duì)象替代。 |
|
24 |
obj.childNodes.length |
返回子節(jié)點(diǎn)的數(shù)量,和tag的數(shù)量相同。 |
OK |
NO |
NO |
OK |
FF/Mozilla中,空白或者換行是文本節(jié)點(diǎn),是childNodes的成員。 |
|
25 |
obj. |
向指定的位置插入元素 |
OK |
NO |
NO |
OK |
insertAdjacentElement函數(shù)和insertAdjacentText函數(shù)也類似。 |
|
26 |
createElement() |
創(chuàng)建指定類型元素。 |
OK |
NO |
NO |
OK |
可以先創(chuàng)建出對(duì)象元素,再進(jìn)行屬性設(shè)置;或者直接以InnerHTML的形式加到對(duì)應(yīng)位置。 |
|
27 |
nodeName |
取對(duì)象(tag,attribute,textnode)節(jié)點(diǎn)名稱 |
OK |
OK |
OK |
OK |
有人說存在差異,不知道是具體的前提條件,先記錄備考。 |
|
28 |
window.event |
取得當(dāng)前的事件對(duì)象 |
OK |
NO |
NO |
? |
可以主動(dòng)向事件的響應(yīng)函數(shù)傳入event參數(shù)。 |
|
29 |
event.target |
取得事件的觸發(fā)對(duì)象 |
NO |
OK |
OK |
? |
可以和srcElement共同使用;可以主動(dòng)向事件的響應(yīng)函數(shù)傳入觸發(fā)對(duì)象元素。 |
|
30 |
event.srcElement |
取得事件的觸發(fā)對(duì)象 |
OK |
NO |
NO |
? |
可以和target共同使用;可以主動(dòng)向事件的響應(yīng)函數(shù)傳入觸發(fā)對(duì)象。 |
|
31 |
event對(duì)象屬性 |
當(dāng)前三個(gè)瀏覽器的共同擁有的屬性: |
altLeft |
bubbles |
bubbles |
? |
event對(duì)象的不同點(diǎn)太多,在使用的時(shí)候需要一一檢查才行。具體可以用頁面下方的測(cè)試區(qū)域試驗(yàn)。 |
|
32 |
注冊(cè)event |
用attachEvent函數(shù)注冊(cè) |
OK |
NO |
NO |
- |
小心內(nèi)存泄漏?。。?/B> |
|
33 |
注冊(cè)event |
addEventListener函數(shù)注冊(cè) |
NO |
OK |
OK |
- |
|
|
34 |
注冊(cè)event |
obj.onxxx = Function("響應(yīng)函數(shù)名稱或代碼");方式注冊(cè) |
OK |
OK |
OK |
- |
|
|
35 |
銷毀event |
detachEvent函數(shù)銷毀 |
OK |
NO |
NO |
- |
|
|
36 |
銷毀event |
removeEventListener函數(shù)銷毀 |
NO |
OK |
OK |
- |
|
|
37 |
銷毀event |
obj.onxxx = null;方式注冊(cè) |
OK |
OK |
OK |
- |
|
|
38 |
觸發(fā)event |
fireEvent函數(shù) |
OK |
NO |
NO |
- |
|
|
39 |
觸發(fā)event |
dispatchEvent函數(shù) |
NO |
OK |
OK |
- |
|
相關(guān)文章
Javascript中判斷對(duì)象是否具有屬性的5種方法分享
這篇文章主要介紹了Javascript中判斷對(duì)象是否具有屬性的5種方法分享,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08
JavaScript實(shí)現(xiàn)通過select標(biāo)簽跳轉(zhuǎn)網(wǎng)頁的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)通過select標(biāo)簽跳轉(zhuǎn)網(wǎng)頁的方法,涉及javascript事件響應(yīng)及窗口操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
基于webpack-hot-middleware熱加載相關(guān)錯(cuò)誤的解決方法
下面小編就為大家分享一篇基于webpack-hot-middleware熱加載相關(guān)錯(cuò)誤的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Echarts基本用法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了Echarts基本用法,詳解的介紹了Echarts的基本用法和實(shí)例,有興趣的可以了解一下2017-08-08
利用javascript的面向?qū)ο蟮奶匦詫?shí)現(xiàn)限制試用期
Javascript是一種面向?qū)ο蟮哪_本語言,其也具有面向?qū)ο蟮娜筇匦?,但是今天我們不詳?xì)的講解javascript的面向?qū)ο筇匦裕裉煳覀兒唵蔚牧私庖幌耲avascript的面向?qū)ο筇匦裕缓髮W(xué)習(xí)一下怎樣實(shí)現(xiàn)試用期的限制!2011-08-08
uni-app開發(fā)微信小程序之H5壓縮上傳圖片的問題詳解
這次項(xiàng)目中做了一個(gè)圖片上傳,要求是大于2MB的就壓縮成2MB一下的再上傳,下面這篇文章主要給大家介紹了關(guān)于uni-app開發(fā)微信小程序之H5壓縮上傳圖片的問題,需要的朋友可以參考下2023-03-03

