跨浏览器开发经验总结(三)   警惕“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管中窥豹 形参与实参浅析
Dec 17 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
react基本安装与测试示例
2020/04/27 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
Python中and和or如何使用
2020/05/28 Python
python批量生成条形码的示例
2020/10/10 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
会计专业自荐信范文
2013/12/02 职场文书
农村党员对照检查材料
2014/09/24 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android