跨浏览器开发经验总结(三)   警惕“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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
工作中常用js功能汇总
Nov 07 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逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
Yii框架form表单用法实例
2014/12/04 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python中模块的__all__属性详解
2017/10/26 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
物流经理自我评价
2013/09/23 职场文书
后勤自我鉴定
2013/10/13 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
管理工程专业求职信
2014/08/10 职场文书
材料员岗位职责
2015/02/10 职场文书
免职通知
2015/04/23 职场文书
施工安全保证书
2015/05/09 职场文书
人生遥控器观后感
2015/06/11 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android