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 MD4
Dec 20 Javascript
js玩一玩WSH吧
Feb 23 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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学习之字符串比较和查找
2011/04/17 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
分享python数据统计的一些小技巧
2016/07/21 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
numpy基础教程之np.linalg
2019/02/12 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
python palywright库基本使用
2021/01/21 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
error和exception有什么区别
2012/10/02 面试题
国际贸易专业推荐信
2013/11/15 职场文书
小区门卫管理制度
2014/01/29 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
妇女工作先进事迹
2014/08/17 职场文书
质量月活动总结
2014/08/26 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书