跨浏览器开发经验总结(三)   警惕“IE依赖综合症”


Posted in Javascript onMay 13, 2010

DHTML
DHTML是个好东西,大大方面了前端的交互实现,使得获取页面元素以及动态修改页面元素变的简单无比。但是所有的浏览器都认识这些语法吗?
document.all
document.all不是所有浏览器都能识别,要写出更通用的代码,最好还是通过id来得到,使用document.getElementById(…)
element.outerText, element.innerText, element.outerHTML,element.innerHTML
element.outerText, element.innerText, element.outerHTML是属于IE特有的, 而element.innerHTML是通用的。
如果要在其他浏览器下使用不通用的属性,可以参考以下代码实现:

if(!isIE()){ 
HTMLElement.prototype.__defineGetter__("innerText", 
function(){ 
var anyString = ""; 
var childS = this.childNodes; 
for(var i=0; i<childS.length; i++){ 
if(childS[i].nodeType==1) 
anyString += childS[i].innerText; 
else if(childS[i].nodeType==3) 
anyString += ahildS[i].nodeValue; 
} 
return anyString; 
} 
); 
HTMLElement.prototype.__defineSetter__("innerText", 
function(sText){ 
this.textContent=sText; 
} 
); 
}

document.forms.actionForm.inputName.value
之前用document.all.title.value来获取名为actionForm的标单中名为title的input域值得地方,应该改为document.forms.actionForm.input.value,要这么使用,首先要保证HTML中form标签与其他标签结构上有完整的闭合关系。
Table操作
moveRow ( iSource , iTarget )方法
oRow = tableObject.moveRow ( iSource , iTarget ),这个方法可以很方便实现table中tr的动态顺序调整。但是这个方法是IE内核自己实现的,不是DOM标准方法,所以别的浏览器没有。在使用到了这些IE独有的方法的地方,要么换用标准的DOM节点操纵方式——insertBefore(currobj, beforeObj.nextSibling),要么先在HTMLDocument类的prototype上自己实现一个 moveRow方法:
function getTRArray(){ 
…… 
//将需要操纵的tr都放入数组作为该方法的返回值 
} function getTRByIndex(sourceELIndex){ 
var trArray = getTRArray(); 
var result = trArray[sourceELIndex]; 
return result; 
} 
if( !isIE && HTMLElement.moveRow == null ) 
{ 
//入参说明: 
//sourceELIndex :需要移动的tr在tbody中的第几行(>=1) 
//targetELIndex :需要移动到tbody中的第几行(>=1,<=行数) 
HTMLElement.prototype.moveRow = function(sourceELIndex,targetELIndex) 
{ 
var tbObject = document.getElementById("tbodyEL"); 
var resultEL; 
if(sourceELIndex>=targetELIndex) 
{//move up 
var s = sourceELIndex-1; 
var t = targetELIndex-1; 
}else{ 
var s = sourceELIndex-1; 
var t = targetELIndex; 
} 
var sourceEL = getTRByIndex(s); 
var targetEL = getTRByIndex(t); 
//alert("begin"+sourceELIndex+targetELIndex); 
//alert("begin"+s+t); 
tbObject.insertBefore(sourceEL,targetEL); 
resultEL = sourceEL; 
return resultEL; 
} 
}
Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
JavaScript prototype属性使用说明
May 13 #Javascript
js 实现复制到粘贴板的功能代码
May 13 #Javascript
js href的用法
May 13 #Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 #Javascript
Js 随机数产生6位数字
May 13 #Javascript
js实现兼容IE6与IE7的DIV高度
May 13 #Javascript
JS 文件传参及处理技巧分析
May 13 #Javascript
You might like
解析PHP 5.5 新特性
2013/07/02 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python查询sqlite数据表的方法
2015/05/08 Python
初步讲解Python中的元组概念
2015/05/21 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
python实现批量修改文件名
2020/03/23 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
行政助理岗位职责
2013/11/10 职场文书
团队精神演讲稿
2013/12/31 职场文书
党员服务承诺书
2014/05/28 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
党员个人年度总结
2015/02/14 职场文书