IE与Mozilla下Dhtml的一些区别小结

IE与Mozilla下Dhtml的一些区别小结

1--12 是个 fason(咖啡人生) 的人总结的
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来判断

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

3. 动态更改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>