跨浏览器开发经验总结(三)   警惕“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模版引擎的基本实现方法浅析
Feb 15 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
vue实现全选和反选功能
Aug 31 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
ZK中使用JS读取客户端txt文件内容问题
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脚本的10个技巧(6)
2006/10/09 PHP
浅析PHP Socket技术
2013/08/02 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
js制作提示框插件
2020/12/24 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python实现倒计时的示例
2014/02/14 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
在python中使用nohup命令说明
2020/04/16 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
初一学生评语大全
2014/04/24 职场文书
住宅使用说明书
2014/05/09 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
好媳妇事迹材料
2014/12/24 职场文书
摩登时代观后感
2015/06/03 职场文书
学校运动会加油词
2015/07/18 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server