IE与Mozilla下Dhtml的一些区别

• 在DHTML中对childNodes 在不同浏览器下定义不一样,在mozilla下它不忽略空格，而IE下面是忽略了空格的，比如说
  aa
  IE下面firstChild就是指span了，而mozilla下面是指div和span间的那个空格，是文本类型节点。
• 用document.getElementById方法得到对象时，IE浏览器忽略大小写，但是mozilla下面不忽略，还有就是 用类似window.οnlοad=xxxx时候，如果此函数是在js文件里面而不是在html文件中，那么 大小写要分清楚。

  ---

  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也会有一些微小的区别，具体不提到了。。。

  8.删除一个对象，用DOM的做法是
  var p = obj.parentNode;
  p.removeChild(obj);

  9.select 的option增加和删除看看,不用add和remove
  http://fason.nease.net/samples/js/moveoptions.html

  10.mozilla中处理右键问题，dom2已经支持oncontextmenu,不用e.which == 2来判断

  11.ie下的opacity,mozilla怎么处理？？

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

  
  12.<script src=XX.js></script>
  在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，
  <link id="pagestyle" rel="stylesheet" rev="stylesheet" type="text/css" media="screen" href="template/gray/xmas.css" charset="UTF-8" />
  然后通过脚本来设置
  <script language="JavaScript" type="text/JavaScript">
  function setStyle(h)
  {
  var s = document.getElementById("pagestyle");
  s.href = h;
  return false;
  }
  </script>
  引用
  <a href="#" οnclick="javascript:setStyle('template/gray/gq.css');return false;">国庆样式</a>
  <a href="#" οnclick="javascript:setStyle('template/gray/xmas.css');return false;">圣诞样式</a>
  处理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<this.attributes.length; i++)
        {
          var attr = this.attributes[i];

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

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

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

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

          if(i<textS.length-1)
            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<childS.length; 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，那么可以在</BODY>后加这一段代码：
  if(document.addEventListener)
  {
   var tagcoll=document.getElementsByTagName("*");
   for(var i=0;i<tagcoll.length;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中的核心代码，设计思想还是比较简单的