跨浏览器开发经验总结(三)   警惕“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表数据排序 sort table data
Feb 18 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
php计算整个目录大小的方法
2015/06/19 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
基于Python绘制个人足迹地图
2020/06/01 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Python使用Pygame绘制时钟
2020/11/29 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
机修工岗位职责
2013/11/24 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
力学专业求职信
2014/07/23 职场文书
职位证明模板
2015/06/23 职场文书
春季运动会加油词
2015/07/18 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python