跨浏览器开发经验总结(三)   警惕“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实战_读书笔记1—选择jQuery
Jan 22 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
详解Vue的七种传值方式
Feb 08 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的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
React实现轮播效果
2020/08/25 Javascript
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
python实现FTP循环上传文件
2020/03/20 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
python新手学习使用库
2020/06/11 Python
Python 实现进度条的六种方式
2021/01/06 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
优秀企业获奖感言
2014/02/01 职场文书
开学典礼决心书
2014/03/11 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
倡议书的写法
2014/08/30 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
联村联户简报
2015/07/21 职场文书
实习报告范文
2019/07/30 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
MySQL查询学习之基础查询操作
2021/05/08 MySQL