跨浏览器开发经验总结(三)   警惕“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自启动函数的问题探讨
Oct 05 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
js预加载图片方法汇总
Jun 15 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
JavaScript将数组转换为链表的方法
Feb 16 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP常用的小程序代码段
2015/11/14 PHP
php文件系统处理方法小结
2016/05/23 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
学习python (1)
2006/10/31 Python
Python实现统计单词出现的个数
2015/05/28 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
分层教学实施方案
2014/03/19 职场文书
介绍信样本
2015/01/31 职场文书
首席执行官观后感
2015/06/03 职场文书
房贷收入证明范本
2015/06/12 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS