跨浏览器开发经验总结(三)   警惕“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 相关文章推荐
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
npm 常用命令详解(小结)
Jan 17 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
python实现同时给多个变量赋值的方法
2015/04/30 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Python控制Firefox方法总结
2019/06/03 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
大学同学聚会邀请函
2014/01/29 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server