编写跨浏览器的javascript代码必备[js多浏览器兼容写法]


Posted in Javascript onOctober 29, 2008
序号 操作 分类 IE(6.0) FireFox(2.0) Mozilla(1.5) 当前浏览器 备注
1 "." 访问tag的固有属性 OK OK OK OK  
2 "." 访问tag的用户定义属性eg: OK NO NO OK 可以用getAttribute函数 替代
3 obj.getAttribute 访问tag的固有属性 OK OK OK OK  
4 obj.getAttribute 访问tag的用户定义属性eg: 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 支持的特殊字符("!",".","@","#","$"," 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(""); 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:help
29 event.target 取得事件的触发对象eg: e.target; NO OK OK 可以和srcElement共同使用;可以主动向事件的响应函数传入触发对象元素。eg:help
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 相关文章推荐
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 #Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 #Javascript
JavaScript函数、方法、对象代码
Oct 29 #Javascript
js身份证验证超强脚本
Oct 26 #Javascript
javascript引导程序
Oct 26 #Javascript
javascript笔试题目附答案@20081025_jb51.net
Oct 26 #Javascript
Div自动滚动到末尾的代码
Oct 26 #Javascript
You might like
php header功能的使用
2013/10/28 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
原生js开发的日历插件
2017/02/04 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
九步学会Python装饰器
2015/05/09 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Python原始套接字编程实例解析
2020/01/29 Python
Python修改列表值问题解决方案
2020/03/06 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Python如何操作docker redis过程解析
2020/08/10 Python
python字典按照value排序方法
2020/12/28 Python
css3的transition属性详解
2014/12/15 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
安全月宣传标语
2014/10/07 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android