编写跨浏览器的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 相关文章推荐
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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&&mysql)二
2006/10/09 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
php 分页函数multi() discuz
2009/06/21 PHP
PHP关联链接常用代码
2012/11/05 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
python系列 文件操作的代码
2019/10/06 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
低碳生活倡议书
2014/04/14 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
班级联欢会主持词
2015/07/03 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
小学思想品德教学反思
2016/02/24 职场文书
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers