快捷導(dǎo)航

IE與firefox下Dhtml的一些區(qū)別小結(jié)

更新時間：2009年12月02日 01:13:27 作者：

IE與Mozilla下Dhtml的一些區(qū)別小結(jié)

1.DOM上的接口基本上還是一致的，但經(jīng)測試發(fā)現(xiàn)mozilla下的DOM更標(biāo)準(zhǔn)些,就算些法一樣，IE下會有一些微小的區(qū)別，但無關(guān)要緊
2.事件模型上，這方面區(qū)別算比較大.
mozilla下的e.target 相當(dāng)于 ie下的event.srcElement,但細節(jié)上有區(qū)別，后者是返回一個html element
而e.target返回的是個節(jié)點，也就是說包括文本節(jié)點，方法可以這樣
var trg = e.target;
while(trg.nodeType!=1)trg=trg.parentNode;
mozilla下的e.which與ie下的event.keyCode相當(dāng)
相對應(yīng)的還有e.layerX,e.layerY,e.pageX,e.pageY...
可以看看http://fason.nease.net/mozilla/dom/ event部份
事件綁定上mozilla用addEventListener,removeEventListener,對應(yīng)ie的attachEvent,detatchEvent
3.對象引用上就直接document.getElementById就行了，如果還要兼容ie4,可以再加上document.all判斷
form element的引用要標(biāo)準(zhǔn)些var oInput = document.formName.elements["input1"]
4.XML的應(yīng)用上區(qū)別更大些，因為IE下是通過activex來創(chuàng)建，而mozilla已經(jīng)是有這些對象的（需要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也會有一些微小的區(qū)別，具體不提到了。。。
寫了兩個例子:
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. 對事件附加處理函數(shù)
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的方法

復(fù)制代碼代碼如下:

 
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 ; 
} 
} 