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 高级语法介绍
Jun 15 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
用JS创建一个录屏功能
Nov 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 flock 文件锁详细介绍
2012/12/29 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
JS前端加密算法示例
2016/12/22 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
详解Python中的各种函数的使用
2015/05/24 Python
Python实现基本线性数据结构
2016/08/22 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python正则实现提取电话功能
2018/02/24 Python
Python的argparse库使用详解
2018/10/09 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
药学职务聘任书
2014/03/29 职场文书
经销商年会策划方案
2014/05/29 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
Java spring单点登录系统
2021/09/04 Java/Android
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
讲解Python实例练习逆序输出字符串
2022/05/06 Python