IE与firefox下Dhtml的一些区别小结


Posted in Javascript onDecember 02, 2009

1.DOM上的接口基本上还是一致的,但经测试发现mozilla下的DOM更标准些,就算些法一样,IE下会有一些微小的区别,但无关要紧
2.事件模型上,这方面区别算比较大.
mozilla下的e.target 相当于 ie下的event.srcElement,但细节上有区别,后者是返回一个html element
而e.target返回的是个节点,也就是说包括文本节点,方法可以这样
var trg = e.target;
while(trg.nodeType!=1)trg=trg.parentNode;
mozilla下的e.which与ie下的event.keyCode相当
相对应的还有e.layerX,e.layerY,e.pageX,e.pageY...
可以看看http://fason.nease.net/mozilla/dom/ event部份
事件绑定上mozilla用addEventListener,removeEventListener,对应ie的attachEvent,detatchEvent
3.对象引用上就直接document.getElementById就行了,如果还要兼容ie4,可以再加上document.all判断
form element的引用要标准些var oInput = document.formName.elements["input1"]
4.XML的应用上区别更大些,因为IE下是通过activex来创建,而mozilla已经是有这些对象的(需要dom2支持)
Xmldomdocument: var doc = document.inplementation.createDocument("","",null)
xmlhttp: var req = new XMLHttpRequest()
5.innerText就在mozilla不支持了,需要用些range的技巧来取得它的text
6.insertAdjacentHTML是个比较好用的方法,mozilla可以用DOM的方法insertBefore来兼容
7.更细微的,如Array,Date的一些方法ie和mozilla也会有一些微小的区别,具体不提到了。。。
写了两个例子:
1. 对于通过ID取对象
function getObjectById(id)
{
if (typeof(id) != "string" || id == "") return null;
if (document.all) return document.all(id);
if (document.getElementById) return document.getElementById(id);
try {return eval(id);} catch(e){ return null;}
}
2. 对事件附加处理函数
if(document.attachEvent)
window.attachEvent("onresize", function(){reinsert();});
else
window.addEventListener('resize', function(){reinsert();}, false);
注意在IE里是 onclick 而在firefox NS 里则是 click
用脚本提交
document.formName.action = "...";
document.formName.submit();
好像在mozilla下不能用
处理XML的方法

var FCKXml = function() 
{} 
FCKXml.prototype.GetHttpRequest = function() 
{ 
if ( window.XMLHttpRequest )// Gecko 
return new XMLHttpRequest() ; 
else if ( window.ActiveXObject )// IE 
return new ActiveXObject("MsXml2.XmlHttp") ; 
} 
FCKXml.prototype.LoadUrl = function( urlToCall, asyncFunctionPointer ) 
{ 
var oFCKXml = this ; 
var bAsync = ( typeof(asyncFunctionPointer) == 'function' ) ; 
var oXmlHttp = this.GetHttpRequest() ; 
oXmlHttp.open( "GET", urlToCall, bAsync ) ; 
if ( bAsync ) 
{ 
oXmlHttp.onreadystatechange = function() 
{ 
if ( oXmlHttp.readyState == 4 ) 
{ 
oFCKXml.DOMDocument = oXmlHttp.responseXML ; 
asyncFunctionPointer( oFCKXml ) ; 
} 
} 
} 
oXmlHttp.send( null ) ; 
if ( ! bAsync && oXmlHttp.status && oXmlHttp.status == 200 ) 
this.DOMDocument = oXmlHttp.responseXML ; 
else 
throw( 'Error loading "' + urlToCall + '"' ) ; 
} 
FCKXml.prototype.SelectNodes = function( xpath, contextNode ) 
{ 
if ( document.all )// IE 
{ 
if ( contextNode ) 
return contextNode.selectNodes( xpath ) ; 
else 
return this.DOMDocument.selectNodes( xpath ) ; 
} 
else// Gecko 
{ 
var aNodeArray = new Array(); 
var xPathResult = this.DOMDocument.evaluate( xpath, contextNode ? contextNode : this.DOMDocument, 
this.DOMDocument.createNSResolver(this.DOMDocument.documentElement), XPathResult.ORDERED_NODE_ITERATOR_TYPE, null) ; 
if ( xPathResult ) 
{ 
var oNode = xPathResult.iterateNext() ; 
while( oNode ) 
{ 
aNodeArray[aNodeArray.length] = oNode ; 
oNode = xPathResult.iterateNext(); 
} 
} 
return aNodeArray ; 
} 
} 
FCKXml.prototype.SelectSingleNode = function( xpath, contextNode ) 
{ 
if ( document.all )// IE 
{ 
if ( contextNode ) 
return contextNode.selectSingleNode( xpath ) ; 
else 
return this.DOMDocument.selectSingleNode( xpath ) ; 
} 
else// Gecko 
{ 
var xPathResult = this.DOMDocument.evaluate( xpath, contextNode ? contextNode : this.DOMDocument, 
this.DOMDocument.createNSResolver(this.DOMDocument.documentElement), 9, null); 
if ( xPathResult && xPathResult.singleNodeValue ) 
return xPathResult.singleNodeValue ; 
else 
return null ; 
} 
}
Javascript 相关文章推荐
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 #Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 #Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 #Javascript
JS类的封装及实现代码
Dec 02 #Javascript
Jquery选择器 $实现原理
Dec 02 #Javascript
js 表格隔行颜色
Dec 02 #Javascript
让FireFox支持innerText的实现代码
Dec 01 #Javascript
You might like
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
对python中的装包与解包实例详解
2019/08/24 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
初三政治教学反思
2014/01/30 职场文书
一年级学生评语大全
2014/04/21 职场文书
反邪教警示教育方案
2014/05/13 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2015年党总支工作总结
2015/05/25 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
vue elementUI表格控制对应列
2022/04/13 Vue.js
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技