IE与firefox下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/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 ;

  }

  }