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對象要在<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只讀屬性