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 相关文章推荐
JavaScript去掉数组中的重复元素
Jan 13 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 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
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
企业宣传口号
2014/06/12 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
节水倡议书
2015/01/19 职场文书
简历中自我评价范文
2015/03/11 职场文书
信用卡催款律师函
2015/05/27 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
基于Redission的分布式锁实战
2022/08/14 Redis