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 空位补零实现代码
Feb 26 Javascript
js Date概念详细介绍
Nov 22 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
js实现省市级联效果分享
Aug 10 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 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判断手机访问还是电脑访问示例分享
2014/01/20 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
javascript原生ajax写法分享
2016/04/10 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
微信小程序实现banner图轮播效果
2020/06/28 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
Python中过滤字符串列表的方法
2020/12/22 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
出纳岗位职责模板
2013/11/27 职场文书
个人求职信范文分享
2013/12/13 职场文书
学校万圣节活动方案
2014/02/13 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
督导岗位职责
2015/02/04 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
孝女彩金观后感
2015/06/10 职场文书
SQL Server中锁的用法
2022/05/20 SQL Server