浏览器网页兼容性问题--DOM基础篇

Eric-1001c — Sat, 17 Oct 2009 08:52:00 GMT

W3C针对XHTML以及HTML开发一种DOM，这个DOM是基于HTMLElement和HTMLDocument实现的。除了少数元素只包含HTMLElement属性和方法外，每个HTML元素都通过特定的HTMLElement类型表示。然而并不是所以浏览器对DOM都支持的，下面列出了一些经常会遇到的不兼容的DOM使用问题。

1.childNodes
不同浏览器使用childNodes在处理Text节点存在一些差异。Mozilla认为元素之间的空白是Text节点；而IE，会忽略这些空白。可以通过判断childNodes[x].nodeValue == "#text"，childNodes[x].nodeType == 1解决这个问题；或者使用children属性，children属性是一个数组，可以通过索引获取子节点；

2.document
IE使用document.all，而使用dom标准的浏览可以通过document.getElementsByTagName("*") ；

3.Id&getElementById
在IE中可以把Id当作元素使用，但在其他浏览器不支持。因此建议使用getElementById，getElementById在IE6中使用，如果元素Name等于Id，也会一同返回；

4.集合数组
IE中在使用集合类对象时候，访问可以通过()与[]。建议同一使用[]dom标准访问；

5.body对象
在IE中body对象要在标签完全读入才会存在，而在FireFox中一开始就存在；

6.Type属性
在IE中input标签的type属性是只读的，但在FireFox中是可读写的；

7.removeNodes/removeChild
在FireFox节点中没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)；

8.ParentNode
IE与FireFox的访问父元素有区别，IE为Obj.ParentElement属性;FireFox为Obj.ParentNode属性解决办法：因为FireFox与IE都支持DOM，因此统一用ParentNode属性；

9.set/getAttribute
IE的setAttribute不能设置对象属性、事件属性和style相关的属性，对于自定义的可以设置；要注意在FF中，通过自定义设置的属性和通过.方法设置的属性不是同一个属性；

10.自定义属性
在FF中不支持像IE那样直接获取，建议统一用getAttribute方法；

11.class/className
IE中用”classname”做为属性名来设置或取得css class，FF和其它浏览器用”class”做为属性名来设置或取得，Dom标准的node object具有className属性

12.Range
在IE中有document.selection.createRange(),document.body[button|input].createTextRange()；而在FF中可以通过document.getSelection()[.getRangeAt(0)];而对Range的操作中，除了IE和DOM标准的各种move外，FF中的node element还有selectionStart,selectionEnd只读属性

Eric-1001c 2009-10-17 16:52 发表评论

浏览器网页兼容性问题--DOM EVENT篇

Eric-1001c — Sat, 17 Oct 2009 04:56:00 GMT

DOM的不兼容也说明了DOM高级特性Event的不兼容，因为我们在开发Web的时候，和用户的大量交互都是通过event来实现的，所以单独把event抽出来，把其不兼容性列出：

Event的兼容性
1.事件流的区别
IE         冒泡事件流   在IE6增加等元素对事件流的响应
Mozillal   冒泡事件流在IE6的基础上增加window对象对事件流的响应
Netscape   捕获事件流   同Mozillal
DOM标准    冒泡+捕获    增加文本节点对事件流的响应；同时冒泡+捕获使得事件目标连续接收2次事件
                       （这可能是DOM的事件增加函数有第3个参数的原因）
2.事件处理函数
IE         attach(eventName, fn)、                  eventName=on+事件名
           detachEvent(eventName, fn)
DOM        addEventListener(eventName,fn,boolean)
           removeEventListener(eventName,fn,boolean)    eventName=事件名;
                                                        boolean=true:捕获|false:冒泡
                                                        remove只有同事件流才能起效
3.事件对象
定位       IE：window.event；                           window.event||arguments[0]
           DOM：arguments[0]（事件处理函数的参数），可以通过caller来防止硬编码获取；

事件目标   IE：event.srcElement                         event.srcElement||event.target
           DOM:event.target

阻止事件   IE: event.returnValue = true                 if(isIE){window.event.returnValue = true;}
默认行为   DOM: event.preventDefault()                  else{arguments[0].preventDefault();}

3.1 鼠标事件[对象]
鼠标位置    IE：event.x,event.y                         event.x?event.x:event.PageX
            DOM:event.pageX, event.pageY                event.y?event.y:event.PageY
进入事件1   IE ：onmouseenter, onmouseleave             它们的区别在于处理嵌套dom object出入上，只有
DOM：mouseover,mouseout                     DOM标准才进行处理，enter/leave会忽略，也就是说
                                                        (fromElement!=toElement) && (this.contains(toElement) 触发onmouseover
                                                        (fromElement!=toElement) && (this.contains(fromElement) ) 触发onmouseout
进入事件2   IE：event.fromElement|toElement，
                event.srcElement
            DOM： target，relatedTarget                 对于mouseover：fromElement=relatedElement,toElement = srcElement=target;
                                                        对于mouseout : toElement=relatedElement,fromElement = srcElement=target;

3.2 键盘事件
字符代码    IE：event.keyCode；DOM: 数值代码-event.keyCode。event.isChar?event.charCode:event.keyCode ，在FF中，keyCode只能获得功能键的数值代码，其他的需通过which和charCode，在Opera中，则只能通过which

Eric-1001c 2009-10-17 12:56 发表评论

BlogJava-eric-1001c-文章分类-JavaScript

浏览器网页兼容性问题--DOM基础篇

浏览器网页兼容性问题--DOM EVENT篇