1. getElementById
【分析說明】先來看一組代碼:
<!-- input對象訪問1 -->在Firefox中,按鈕沒反應,在IE中,就可以,因為對於IE來說,一個HTML 元素的 ID 可以直接在腳本中當作變量名來使用,而Firefox中不可以。
【兼容處理】盡量采用W3C DOM 的寫法,訪問對象的時候,用document.getElementById("id") 以ID來訪問對象,且一個ID在頁面中必須是唯一的,同樣在以標簽名來訪問對象的時候,用document.getElementsByTagName("div")[0] 。該方式得到較多浏覽器的支持。
<!-- input對象訪問2 -->2. 集合類對象訪問
【分析說明】IE下,可以使用()或[]獲取集合類對象;Firefox下,只能使用[]獲取集合類對象。如:
document.write(document.forms("formName").src); //該寫法在IE下能訪問到Form對象的scrc屬性【兼容處理】將document.forms("formName")改為 document.forms["formName"]。統一使用[]獲取集合類對象。
3. frame的引用
【分析說明】IE可以通過id或者name訪問這個frame對應的window對象,而Firefox只可以通過name來訪問這個frame對應的window對象。
例如如果上述frame標簽寫在最上層的window裡面的htm裡面,那麼可以這樣訪問:
IE: window.top.frameId或者window.top.frameName來訪問這個window對象;
Firefox:只能這樣window.top.frameName來訪問這個window對象。
【兼容處理】使用frame的name來訪問frame對象,另外,在IE和Firefox中都可以使用window.document.getElementById(”frameId”)來訪問這個frame對象。
4. parentElement
【分析說明】IE中支持使用parentElement和parentNode獲取父節點。而Firefox只可以使用parentNode。
【兼容處理】因為firefox與IE都支持DOM,因此統一使用parentNode來訪問父節點。
5. table操作
【分析說明】IE下table中無論是用innerHTML還是appendChild插入<tr>都沒有效果,而其他浏覽器卻顯示正常。
【兼容處理】解決的方法是,將<tr>加到table的<tbody>元素中,如下面所示:
var row = document.createElement("tr");6. 移除節點removeNode()和removeChild()
【分析說明】appendNode在IE和Firefox下都能正常使用,但是removeNode只能在IE下用。
removeNode方法的功能是刪除一個節點,語法為node.removeNode(false)或者node.removeNode(true),返回值是被刪除的節點。
removeNode(false)表示僅僅刪除指定節點,然後這個節點的原孩子節點提升為原雙親節點的孩子節點。
removeNode(true)表示刪除指定節點及其所有下屬節點。被刪除的節點成為了孤立節點,不再具有有孩子節點和雙親節點。
【兼容處理】Firefox中節點沒有removeNode方法,只能用removeChild方法代替,先回到父節點,在從父節點上移除要移除的節點。
node.parentNode.removeChild(node); // 為了在ie和firefox下都能正常使用,取上一層的父結點,然後remove。7. childNodes獲取的節點
【分析說明】childNodes的下標的含義在IE和Firefox中不同,看一下下面的代碼:
<ul id="main">分別用IE和Firefox運行,IE的結果是3,而Firefox則是7。Firefox使用DOM規范,"#text"表示文本(實際是無意義的空格和換行等)在Firefox裡也會被解析成一個節點,在IE裡只有有實際意義的文本才會解析成"#text"。
【兼容處理】
方法一,獲取子節點時,可以通過node.getElementsByTagName()來回避這個問題。但是 getElementsByTagName對復雜的DOM結構遍歷明顯不如用childNodes,因為childNodes能更好的處理DOM的層次結構。
方法二,在實際運用中,Firefox在遍歷子節點時,不妨在for循環裡加上:
if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。這樣可以跳過一些文本節點。
8. Firefox不能對innerText支持
【分析說明】Firefox不支持innerText,它支持textContent來實現innerText,不過textContent沒有像innerText一樣考慮元素的display方式,所以不完全與IE兼容。如果不用textContent,字符串裡面不包含HTML代碼也可以用innerHTML代替。也可以用js寫個方法實現。
【兼容處理】通過判斷浏覽器類型來兼容:
if(document.all){