编写跨浏览器的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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
JQuery animate动画应用示例
May 14 jQuery
vue 动态组件用法示例小结
Mar 06 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 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小程序自动提交到自助友情连接
2009/11/24 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
浅谈Fetch 数据交互方式
2018/12/20 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python pip使用超时问题解决方案
2020/08/03 Python
Python如何实现远程方法调用
2020/08/07 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
公开承诺书格式
2014/05/21 职场文书
摩登时代观后感
2015/06/03 职场文书
学生会招新宣传语
2015/07/13 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
Python 中random 库的详细使用
2021/06/03 Python