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 相关文章推荐
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
理解Javascript图片预加载
Feb 23 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
如何利用React实现图片识别App
Feb 18 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中计算时间差的几种方法
2009/12/31 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
JS前端加密算法示例
2016/12/22 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python字符串下标与切片及使用方法
2020/02/13 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
村庄绿化方案
2014/05/07 职场文书
旅游活动总结
2014/08/27 职场文书
个人收入证明范本
2014/09/18 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
2015国庆节感想
2015/08/04 职场文书
详解Python flask的前后端交互
2022/03/31 Python