編寫跨瀏覽器的javascript代碼必備[js多瀏覽器兼容寫法]

更新時(shí)間：2008年10月29日 22:47:41 作者：

下面比較了幾種瀏覽器之間的差異，在寫javascript代碼時(shí) 要時(shí)刻注意這些差異

序號(hào)	操作	分類	IE (6.0)	FireFox (2.0)	Mozilla (1.5)	當(dāng)前瀏覽器	備注
1	"."	訪問tag的固有屬性	OK	OK	OK	OK
2	"."	訪問tag的用戶定義屬性 eg: <input type="checkbox" myattr="test">	OK	NO	NO	OK	可以用getAttribute函數(shù) 替代
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對(duì)象或者getElementById函數(shù)實(shí)現(xiàn)對(duì)應(yīng)操作。有人說它不能取Div元素，測(cè)試結(jié)果是可以，不知道是不是還有其它因素會(huì)影響測(cè)試結(jié)果。
6	obj.all	訪問非document元素的所有子元素 eg: document.getElementById("mydiv").all	OK	NO	NO	OK	同上
7	getElementById()	根據(jù)元素的id/name來取得元素。如果元素只設(shè)置name屬性,沒有設(shè)置id屬性。	OK	NO	NO	OK	注意：很多元素是沒有name屬性的,eg: td, div,span...
8	變量名 = ""	隱式定義變量-通過向變量名附值方式定義一個(gè)新的變量。	OK	OK	OK	OK	建議：為避免必要的麻煩，顯示定義變量。 eg：var tmp;
9	id	通過id直接調(diào)用對(duì)象 eg: test_result_1.innerHTML = ""	OK	OK	NO	OK	eval()函數(shù)用來執(zhí)行腳本，所以向eval函數(shù)里面?zhèn)魅雽?duì)象id/name的話，IE同樣會(huì)返回對(duì)象的引用。建議用document.getElementById(id)方式調(diào)用注意：因?yàn)檫@個(gè)原因，IE中隱式定義的變量不能和HTML中元素的id/name相同。
10	name	通過name直接調(diào)用對(duì)象 eg: test_for_this_name.innerHTML = ""	OK	NO	NO	OK	同上/ 原因同7
11	name	支持的特殊字符（"!",".","@","#","$","<",...） eg: document.getElementsByName("aaaa!page");	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ì)象前提：tr元素是被刪除后的tr對(duì)象，或者是用cloneNode(true)復(fù)制的刪除前的tr對(duì)象	NO	OK	OK	undefined	可以將其插入Table再訪問，或者可以用getElementsByTagName函數(shù) 對(duì)td/th訪問。刪除后的rows對(duì)象不存在這個(gè)問題。其它元素？
14	（index）	訪問集合類對(duì)象 eg: document. getElementsByTagName("TD")(0)	OK	NO	NO	OK	建議用正式的操作符"[]".
15	obj.toString()	取得對(duì)象的字符串"[object 對(duì)象類型的名稱]". eg: td == "[object HTMLTableCellElement]"	NO	OK	OK	NO	可以省略toString()函數(shù)，直接用對(duì)象來操作。注：在IE中返回"[object]"。
16	obj.class	定義對(duì)象的css式樣/風(fēng)格。 eg: td.class="XPstyle";	NO	OK	NO	-	無法寫測(cè)試代碼，會(huì)有編譯錯(cuò)誤！可以自己用typeof(class) == null來測(cè)試一下，沒有異常就在代碼中可以使用。在HTML腳本中用class，但是在Javascript中應(yīng)該用classname(class是JS的保留關(guān)鍵字). 注意：用 setAttribute可以把class值設(shè)置到對(duì)象中去，但是不會(huì)被當(dāng)作css式樣來解析。
17	const	保留關(guān)鍵字，用于定義常量。 eg：const HOURS = 24;	NO	OK	OK	-	暫時(shí)只能不使用const。
18	input.type	變更input元素的類型 eg: input.type="button";	NO	OK	OK	NO	IE可以初始input元素類型，但是不能變更類型。如果必須變更，可以用更換input元素的方式。
19	obj.children	訪問對(duì)象的子元素集合 eg: document.body.children.length;	OK	NO	NO	OK	可以用childNodes對(duì)象替代。
20	node.replaceNode	替換新的節(jié)點(diǎn)對(duì)象 eg: oldNode.replaceNode(newNode);	OK	NO	NO	OK	可以用replaceChild函數(shù)替換。
21	node.removeNode	刪除已有節(jié)點(diǎn)對(duì)象 eg.oldNode.removeNode(true);	OK	NO	NO	OK	可以用oldNode.parentNode.removeChild(oldNode)方式實(shí)現(xiàn)。
22	node.insertBefore	在指定節(jié)點(diǎn)對(duì)象前面插入一個(gè)節(jié)點(diǎn)對(duì)象 document.body.insertBefore(newN, oldN);	OK	OK	OK	OK
23	obj.parentElement	訪問對(duì)象的父元素 eg: document.body.parentElement.id;	OK	NO	NO	OK	可以用parentNode對(duì)象替代。
24	obj.childNodes.length	返回子節(jié)點(diǎn)的數(shù)量，和tag的數(shù)量相同。 eg:document.body.childNodes.length;	OK	NO	NO	OK	FF/Mozilla中，空白或者換行是文本節(jié)點(diǎn)，是childNodes的成員。可以用node.getElementsByTagName()回避。
25	obj. insertAdjacentElement	向指定的位置插入元素 eg: obj.insertAdjacentElement("beforeBegin",button);	OK	NO	NO	OK	insertAdjacentElement函數(shù)和insertAdjacentText函數(shù)也類似。可以用insertBefore函數(shù)實(shí)現(xiàn)類似功能。
26	createElement()	創(chuàng)建指定類型元素。前提：元素為HTML腳本 eg：document.createElment("<input type='radio' value='test'>");	OK	NO	NO	OK	可以先創(chuàng)建出對(duì)象元素，再進(jìn)行屬性設(shè)置；或者直接以InnerHTML的形式加到對(duì)應(yīng)位置。
27	nodeName	取對(duì)象(tag,attribute,textnode)節(jié)點(diǎn)名稱 eg: name = obj.nodeName;	OK	OK	OK	OK	有人說存在差異，不知道是具體的前提條件，先記錄備考。替代方案：如果節(jié)點(diǎn)是tag元素可以用"tagName"取值；如果節(jié)點(diǎn)是attribut對(duì)象可以用"name"取值;如果節(jié)點(diǎn)是textnode元素可以用nodeType==3判斷。
28	window.event	取得當(dāng)前的事件對(duì)象 eg: window.event;	OK	NO	NO	?	可以主動(dòng)向事件的響應(yīng)函數(shù)傳入event參數(shù)。 eg:<a onclick="javascript:showHelp(event)">help</a>
29	event.target	取得事件的觸發(fā)對(duì)象 eg: e.target;	NO	OK	OK	？	可以和srcElement共同使用;可以主動(dòng)向事件的響應(yīng)函數(shù)傳入觸發(fā)對(duì)象元素。 eg:<a onclick="javascript:showHelp(this, event)">help</a>
30	event.srcElement	取得事件的觸發(fā)對(duì)象 eg: e.srcElement;	OK	NO	NO	？	可以和target共同使用;可以主動(dòng)向事件的響應(yīng)函數(shù)傳入觸發(fā)對(duì)象。 eg: var obj = (e.target) ? e.target : e.srcElemtn;
31	event對(duì)象屬性	當(dāng)前三個(gè)瀏覽器的共同擁有的屬性： 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對(duì)象的不同點(diǎn)太多，在使用的時(shí)候需要一一檢查才行。具體可以用頁面下方的測(cè)試區(qū)域試驗(yàn)。
32	注冊(cè)event	用attachEvent函數(shù)注冊(cè)	OK	NO	NO	-	小心內(nèi)存泄漏?。。?/B> 事件處理完后一定要調(diào)用detachEvent函數(shù)銷毀事件，而且要注意避免重復(fù)注冊(cè)。
33	注冊(cè)event	addEventListener函數(shù)注冊(cè)	NO	OK	OK	-
34	注冊(cè)event	obj.onxxx = Function("響應(yīng)函數(shù)名稱或代碼");方式注冊(cè) eg: btn.onclick = Function(doclick); btn.onclick = Function("return 1+1;");	OK	OK	OK	-
35	銷毀event	detachEvent函數(shù)銷毀	OK	NO	NO	-
36	銷毀event	removeEventListener函數(shù)銷毀	NO	OK	OK	-
37	銷毀event	obj.onxxx = null;方式注冊(cè) eg: btn.onclick = null;	OK	OK	OK	-
38	觸發(fā)event	fireEvent函數(shù) eg:btn.fireEvent("onclick"); FF: var e = document.createEvent("Events"); e.initEvent("click", true, false); element.dispatchEvent(event)	OK	NO	NO	-
39	觸發(fā)event	dispatchEvent函數(shù) eg: var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true); btn.dispatchEvent(evt);	NO	OK	OK	-