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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
简单的Jquery全选功能
Nov 07 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
2014年三八妇女节活动方案
2014/02/28 职场文书
安全检查汇报材料
2014/12/26 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers