跨浏览器开发经验总结(三)   警惕“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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
js 自动播放的实例代码
Nov 19 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
js实现网页收藏功能
Dec 17 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
基于python实现微信模板消息
2015/12/21 Python
Python变量赋值的秘密分享
2018/04/03 Python
python实现图片文件批量重命名
2020/03/23 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
浅析python标准库中的glob
2020/03/13 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
家教广告词
2014/03/19 职场文书
团队队名口号大全
2014/06/06 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
学校运动会广播稿
2014/10/11 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技