跨浏览器开发经验总结(三)   警惕“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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
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常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
Use Word to Search for Files
2007/06/15 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
vue debug 二种方法
2018/09/16 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
python实现用户答题功能
2018/01/17 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
python实现人机猜拳小游戏
2020/02/03 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
顶撞老师检讨书
2014/02/07 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书