跨浏览器开发经验总结(三)   警惕“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 相关文章推荐
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
vue键盘事件点击事件加native操作
Jul 27 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
文件上传类
2006/10/09 PHP
建立文件交换功能的脚本(三)
2006/10/09 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
php字符集转换
2017/01/23 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
javascript里的条件判断
2007/02/27 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
优良学风班总结材料
2014/02/08 职场文书
银行简历自我评价
2014/02/11 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
解除同居协议书
2015/01/29 职场文书
全陪导游词开场白
2015/05/29 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python