跨浏览器开发经验总结(三)   警惕“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 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
详解JS函数重载
Dec 04 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 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的开合式多级菜单程序
2006/10/09 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
PHP缓冲区用法总结
2016/02/14 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
玩转python爬虫之cookie使用方法
2016/02/17 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
编码实现字符串转整型的函数
2012/06/02 面试题
森林防火工作方案
2014/02/14 职场文书
寄语是什么意思
2014/04/10 职场文书
爱护公物标语
2014/06/24 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
SQL Server中锁的用法
2022/05/20 SQL Server