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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
原生js编写焦点图效果
Dec 08 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
聊天室php&mysql(二)
2006/10/09 PHP
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php绘制一条直线的方法
2015/01/24 PHP
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
python实现电子词典
2020/04/23 Python
python里对list中的整数求平均并排序
2014/09/12 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Django操作session 的方法
2020/03/09 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
公司董事长职责
2013/12/12 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
力学专业求职信
2014/07/23 职场文书
立志成才演讲稿
2014/09/04 职场文书
个人股份合作协议书
2014/10/24 职场文书
自荐信模板大全
2015/03/27 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android