跨浏览器开发经验总结(三)   警惕“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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
JavaScript中对象介绍
Dec 31 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
JS如何生成动态列表
Sep 22 Javascript
jQuery实现计算器功能
Oct 19 jQuery
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)
2010/09/04 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
php实现的简单日志写入函数
2015/03/31 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
JS target与currentTarget区别说明
2011/08/28 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
实习证明模板
2015/06/16 职场文书
导游词之长城八达岭
2019/09/24 职场文书
优化Mysql查询的示例
2022/04/26 MySQL