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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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新手上路(五)
2006/10/09 PHP
五个PHP程序员工具
2008/05/26 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
JAVASCRIPT HashTable
2007/01/22 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
Python操作SQLite简明教程
2014/07/10 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python操作MongoDB详解及实例
2017/05/18 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
社团文化节邀请函
2014/01/10 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
管理建议书范文
2014/05/13 职场文书
员工安全承诺书
2014/05/22 职场文书
承租经营合作者协议书
2014/10/01 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
出差报告范文
2014/11/06 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
个人德育工作总结
2015/03/05 职场文书
机器人总动员观后感
2015/06/09 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers