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 相关文章推荐
学习YUI.Ext 第七天--关于View&JSONView
Mar 10 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
详解Python中用于计算指数的exp()方法
2015/05/14 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
自我评价是什么
2014/01/04 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
工作会议简报
2015/07/20 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
MySQL系列之二 多实例配置
2021/07/02 MySQL
Redis实现短信验证码登录的示例代码
2022/06/14 Redis