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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
Js 随机数产生6位数字
May 13 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
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
AM/FM收音机的安装与调试
2021/03/02 无线电
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
python控制台中实现进度条功能
2015/11/10 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
班长自荐书范文
2014/02/11 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
认购协议书范本
2014/04/22 职场文书
慰问信格式规范
2015/03/23 职场文书
小学校长开学致辞
2015/07/29 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
python在package下继续嵌套一个package
2022/04/14 Python