IE與Mozilla下DHTML的一些區別

 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/moz...    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也會有一些微小的區別，具體不提到了。。。

8.刪除一個對象，用DOM的做法是
var p = obj.parentNode;
p.removeChild(obj);

9.select 的option增加和刪除看看,不用add和remove
http://fason.nease.net/sam...

10.mozilla中處理右鍵問題，dom2已經支援oncontextmenu,不用e.which == 2來判斷

11.ie下的opacity,mozilla怎麼處理？？

答：
obj.style.MozOpacity = 0.5;//  .opacity-css { -moz-opacity:0.5 }

12.

在ie下改變script的src可以直接obj.src="XXX.js",mozilla不行，要remove掉再create一個才會生效.

13.ie下的obj.currentStyle.xxx，mozilla下用
document.defaultView.getComputedStyle(obj, '').getPropertyValue("xxx")

寫了兩個例子:
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 !
動態更改CSS IE跟Mozilla可以這樣
給link設定id，然後通過指令碼來設定

引用
{
function anonymous()
{
setStyle('template/gray/gq.css');return false;
}
}" href="http://www.myhorde.net/blog/read.php?53#">國慶樣式
{
function anonymous()
{
setStyle('template/gray/xmas.css');return false;
}
}" href="http://www.myhorde.net/blog/read.php?53#">聖誕樣式
處理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 ;
}
}
XML應用上區別還有
if(ie){
   var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
   xmlDoc.async = "false";
   xmlDoc.loadXML(xmlText);
}
else{ //mozilla
   var parser = new DOMParser();
   var xmldoc = parser.parseFromString(xmlText,"text/xml");
}

這些是幾個mozilla下沒有的屬性。

 HTMLElement.prototype.__defineGetter__
 (
   "outerHTML",
   function()
   {
     var str = "<" + this.tagName;
     for (var i=0; i      {
       var attr = this.attributes[i];

       str += " ";
       str += attr.nodeName + "=" + '"' + attr.nodeValue + '"';
     }
     str += ">" + this.innerHTML + "      return str;
   }
 );

 HTMLElement.prototype.__defineSetter__
 (
   "innerText",
   function (anything)
   {
     this.innerHTML = "";

     var sText = String(anything);
     var textS = sText.split("/n");
     for(var i=0; i      {
       var txtNode = null;
       var retNode = null;

       if(textS[i].length)
         txtNode = document.createTextNode(textS[i]);

       if(i          retNode = document.createElement("BR");

       if(txtNode)
         this.appendChild(txtNode);

       if(retNode)
         this.appendChild(retNode);
     }
   }
 );

 HTMLElement.prototype.__defineGetter__
 (
   "innerText",
   function ()
   {
     var anyString = "";

     var childS = this.childNodes;
     for(var i=0; i      {
       if(childS[i].nodeType==1)
         anyString += childS[i].tagName=="BR" ? '/n' : childS[i].innerText;
       else if(childS[i].nodeType==3)
         anyString += childS[i].nodeValue;
     }

     return anyString;
   }
 );

 HTMLElement.prototype.__defineGetter__
 (
   "text",
   function ()
   {
     return this.innerText;
   }
 );

mozilla 不支援 element.customAttribute 的。
一定要用 setAttribute("customAttribute",value) , getAttribute("customAttribute")
（這個是最麻煩的地方）

我自己是寫了這個全域函數來添加刪除事件的：

function AttachDomEvent(obj,name,func)
{
if(obj.attachEvent)
 obj.attachEvent("on"+name,func);
if(obj.addEventListener)
 obj.addEventListener(name,func,true);
}
function DetachDomEvent(obj,name,func)
{
if(obj.detachEvent)
 obj.detachEvent("on"+name,func);
if(obj.removeEventListener)
 obj.removeEventListener(name,func,true);
}

例如
AttachDomEvent(window,"click",handle_click);

有時候mozilla不認某寫元素的id,如果你不想用getElementById，那麼可以在後加這一段代碼：
if(document.addEventListener)
{
var tagcoll=document.getElementsByTagName("*");
for(var i=0;i {
 if(tagcoll[i].id)
 {
  eval("var "+tagcoll[i].id+"=document.getElementById('"+tagcoll[i].id+"')");
 }
}
}
不過這段代碼與 iframe/frame 的有衝突的地方。

我平時用到的比較常見的問題是
table.insertRow(-1);
row.insertCell(-1);

事件方面還有一點非常有用的，的就是事件的重定向
IE5.5+用obj.fireEvent(eventName, eventObj)
ns下用obj.dispatchEvent(eventObj);
事實上事件重新導向的頻繁使用是會使瀏覽器崩潰的特別在ns下，避免這樣可以自己類比事件的重新導向和觸發，有興趣的去看看bindows的application.js中的核心代碼，設計思想還是比較簡單的