序号 操作 分类 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对象属性 当前三个浏览器的共同拥有的属性：altKeybuttoncancelBubbleclientXclientYctrlKeyscreenXscreenYshiftKeytype　 altLeftbehaviorCookiebehaviorPartbookmarksboundElementscontentOverflowctrlLeftdataFlddataTransferfromElementkeyCodenextPageoffsetXoffsetYpropertyNamequalifierreasonrecordsetrepeatreturnValuesrcElementshiftLeftsrcFiltersrcUrntoElementwheelDeltaxy　 bubblescancelablecurrentTargetdetaileventPhaseexplicitOriginalTargetisCharisTrustedlayerXlayerYmetaKeyoriginalTargetpageXpageYrangeOffsetrangeParentrelatedTargettargettimeStampviewwhich bubblescancelablecharCodecurrentTargetdetaileventPhaseexplicitOriginalTargetisCharkeyCodelayerXlayerYmetaKeyoriginalTargetpageXpageYpopupWindowURIrangeOffsetrangeParentrelatedTargetrequestingWindowURItargettimeStampviewwhich ? 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 - 　

　　推荐阅读

　　javascript引导程序

1、网页在加载时，页面代码中的js文件引用(如下)都会向服务器产生http请求，因为在body.onload事件之前加载的文件（这里我称之为静态加载文件）都会向服务器产生http请求。为了减少服务器的http请求，本人提倡每个>>>详细阅读

本文标题：编写跨浏览器的javascript代码必备[js多浏览器兼容写法]

地址：http://www.17bianji.com/kaifa2/JS/29283.html

 1/2    1