編寫跨瀏覽器的javascript代碼必備[js多瀏覽器安全色寫法]

來源:互聯網
上載者:User

序號

操作

分類

IE
(6.0)

FireFox
(2.0)

Mozilla
(1.5)

當前
瀏覽器

備忘

1

"."

訪問tag的固有屬性

OK

OK

OK

OK

 

2

"."

訪問tag的使用者定義屬性
eg: <input type="checkbox" myattr="test">

OK

NO

NO

OK

可以用getAttribute函數 替代

3

obj.getAttribute

訪問tag的固有屬性

OK

OK

OK

OK

 

4

obj.getAttribute

訪問tag的使用者定義屬性
eg: <input type="checkbox" myattr="test">

OK

OK

OK

OK

 

5

document.all

訪問document的所有子項目
eg:document.all

OK

OK

NO

OK

建議用childNodes對象或者getElementById函數實現對應操作。
有人說它不能取Div元素,測試結果是可以,不知道是不是還有其它因素會影響測試結果。

6

obj.all

訪問非document元素的所有子項目
eg: document.getElementById("mydiv").all

OK

NO

NO

OK

同上

7

getElementById()

根據元素的id/name來取得元素。
如果元素只設定name屬性,沒有設定id屬性。

OK

NO

NO

OK

注意:很多元素是沒有name屬性的,eg: td, div,span...

8

變數名 = ""

隱式定義變數-通過向變數名附值方式定義一個新的變數。

OK

OK

OK

OK

建議:為避免必要的麻煩,顯示定義變數。
eg:var tmp;

9

id

通過id直接調用對象
eg: test_result_1.innerHTML = ""

OK

OK

NO

OK

eval()函數用來執行指令碼,所以向eval函數裡面傳入對象id/name的話,IE同樣會返回對象的引用。
建議用document.getElementById(id)方式調用
注意:因為這個原因,IE中隱式定義的變數不能和HTML中元素的id/name相同。

10

name

通過name直接調用對象
eg: test_for_this_name.innerHTML = ""

OK

NO

NO

OK

同上/ 原因同7

11

name

支援的特殊字元("!",".","@","#","$","<",...)
eg: document.getElementsByName("aaaa!page");

NO

OK

OK

NO

其它的字元沒有測試

12

tr.innerHTML = ""

設定TR元素的內部HTML指令碼

NO

OK

OK

NO

在IE中,table、tr的innerHTML是唯讀屬性,不能夠對其直接設定。可以通過insertRow/insertCell函數進行設定。

13

cells對象訪問

訪問tr的cells對象
前提:tr元素是被刪除後的tr對象,或者是用cloneNode(true)複製的刪除前的tr對象

NO

OK

OK

undefined

可以將其插入Table再訪問,或者可以用getElementsByTagName函數 對td/th訪問。
刪除後的rows對象不存在這個問題。其它元素?

14

(index)

訪問集合類對象
eg: document.
getElementsByTagName("TD")(0)

OK

NO

NO

OK

建議用正式的操作符"[]".

15

obj.toString()

取得對象的字串"[object 物件類型的名稱]".
eg: td == "[object HTMLTableCellElement]"

NO

OK

OK

NO

可以省略toString()函數,直接用對象來操作。
註:在IE中返回"[object]"。

16

obj.class

定義對象的css式樣/風格。
eg: td.class="XPstyle";

NO

OK

NO

-

無法寫測試代碼,會有編譯錯誤!可以自己用typeof(class) == null來測試一下,沒有異常就在代碼中可以使用。
在HTML指令碼中用class,但是在Javascript中應該用classname(class是JS的保留關鍵字).
注意:用 setAttribute可以把class值設定到對象中去,但是不會被當作css式樣來解析。

17

const

保留關鍵字,用於定義常量。
eg:const HOURS = 24;

NO

OK

OK

-

暫時只能不使用const。

18

input.type

變更input元素的類型
eg: input.type="button";

NO

OK

OK

NO

IE可以初始input元素類型,但是不能變更類型。
如果必須變更,可以用更換input元素的方式。

19

obj.children

訪問對象的子項目集合
eg: document.body.children.length;

OK

NO

NO

OK

可以用childNodes對象替代。

20

node.replaceNode

替換新的節點對象
eg: oldNode.replaceNode(newNode);

OK

NO

NO

OK

可以用replaceChild函數替換。

21

node.removeNode

刪除已有節點對象
eg.oldNode.removeNode(true);

OK

NO

NO

OK

可以用oldNode.parentNode.removeChild(oldNode)方式實現。

22

node.insertBefore

在指定節點對象前面插入一個節點對象
document.body.insertBefore(newN, oldN);

OK

OK

OK

OK

 

23

obj.parentElement

訪問對象的父元素
eg: document.body.parentElement.id;

OK

NO

NO

OK

可以用parentNode對象替代。

24

obj.childNodes.length

返回子節點的數量,和tag的數量相同。
eg:document.body.childNodes.length;

OK

NO

NO

OK

FF/Mozilla中,空白或者換行是文本節點,是childNodes的成員。
可以用node.getElementsByTagName()迴避。

25

obj.
insertAdjacentElement

向指定的位置插入元素
eg: obj.insertAdjacentElement("beforeBegin",button);

OK

NO

NO

OK

insertAdjacentElement函數和insertAdjacentText函數也類似。
可以用insertBefore函數實作類別似功能。

26

createElement()

建立指定類型元素。
前提:元素為HTML指令碼
eg:document.createElment("<input type='radio' value='test'>");

OK

NO

NO

OK

可以先建立出對象元素,再進行屬性設定;或者直接以InnerHTML的形式加到對應位置。
 

27

nodeName

取對象(tag,attribute,textnode)節點名稱
eg: name = obj.nodeName;

OK

OK

OK

OK

有人說存在差異,不知道是具體的前提條件,先記錄備考。
替代方案:
如果節點是tag元素可以用"tagName"取值;如果節點是attribut對象可以用"name"取值;如果節點是textnode元素可以用nodeType==3判斷。

28

window.event

取得當前的事件對象
eg: window.event;

OK

NO

NO

?

可以主動向事件的響應函數傳入event參數。
eg:<a onclick="javascript:showHelp(event)">help</a>

29

event.target

取得事件的觸發對象
eg: e.target;

NO

OK

OK

可以和srcElement共同使用;可以主動向事件的響應函數傳入觸發對象元素。
eg:<a onclick="javascript:showHelp(this, event)">help</a>

30

event.srcElement

取得事件的觸發對象
eg: e.srcElement;

OK

NO

NO

可以和target共同使用;可以主動向事件的響應函數傳入觸發對象。
eg: var obj = (e.target) ? e.target : e.srcElemtn;

31

event對象屬性

當前三個瀏覽器的共同擁有的屬性:
altKey
button
cancelBubble
clientX
clientY
ctrlKey
screenX
screenY
shiftKey
type

 

altLeft
behaviorCookie
behaviorPart
bookmarks
boundElements
contentOverflow
ctrlLeft
dataFld
dataTransfer
fromElement
keyCode
nextPage
offsetX
offsetY
propertyName
qualifier
reason
recordset
repeat
returnValue
srcElement
shiftLeft
srcFilter
srcUrn
toElement
wheelDelta
x
y
 

bubbles
cancelable
currentTarget
detail
eventPhase
explicitOriginalTarget
isChar
isTrusted
layerX
layerY
metaKey
originalTarget
pageX
pageY
rangeOffset
rangeParent
relatedTarget
target
timeStamp
view
which

bubbles
cancelable
charCode
currentTarget
detail
eventPhase
explicitOriginalTarget
isChar
keyCode
layerX
layerY
metaKey
originalTarget
pageX
pageY
popupWindowURI
rangeOffset
rangeParent
relatedTarget
requestingWindowURI
target
timeStamp
view
which

?

event對象的不同點太多,在使用的時候需要一一檢查才行。具體可以用頁面下方的測試地區實驗。

32

註冊event

用attachEvent函數註冊

OK

NO

NO

-

小心記憶體流失!!!
事件處理完後一定要調用detachEvent函數銷毀事件,而且要注意避免重複註冊。

33

註冊event

addEventListener函數註冊

NO

OK

OK

-

 

34

註冊event

obj.onxxx = Function("響應函數名稱或代碼");方式註冊
eg: btn.onclick = Function(doclick);
btn.onclick = Function("return 1+1;");

OK

OK

OK

-

 

35

銷毀event

detachEvent函數銷毀

OK

NO

NO

-

 

36

銷毀event

removeEventListener函數銷毀

NO

OK

OK

-

 

37

銷毀event

obj.onxxx = null;方式註冊
eg: btn.onclick = null;

OK

OK

OK

-

 

38

觸發event

fireEvent函數
eg:btn.fireEvent("onclick");
FF:
var e = document.createEvent("Events");
e.initEvent("click", true, false);
element.dispatchEvent(event)

OK

NO

NO

-

 

39

觸發event

dispatchEvent函數
eg:
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true);
btn.dispatchEvent(evt);

NO

OK

OK

-

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.