IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]
更新時間：2011年10月19日 23:53:01 作者：
長久以來JavaScript兼容性一直是Web開發(fā)者的一個主要問題。在正式規(guī)范、事實標(biāo)準(zhǔn)以及各種實現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬
長久以來JavaScript兼容性一直是Web開發(fā)者的一個主要問題。在正式規(guī)范、事實標(biāo)準(zhǔn)以及各種實現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬。為此，主要從以下幾方面差異總結(jié)IE和Firefox的Javascript兼容性:
一、函數(shù)和方法差異；
二、樣式訪問和設(shè)置；
三、DOM方法及對象引用；
四、事件處理；
五、其他差異的兼容處理。
一、函數(shù)和方法差異
1. getYear()方法
【分析說明】先看一下以下代碼：
var year= new Date().getYear();
document.write(year);
在IE中得到的日期是"2010"，在Firefox中看到的日期是"110"，主要是因為在 Firefox 里面 getYear 返回的是 "當(dāng)前年份-1900" 的值。
【兼容處理】
加上對年份的判斷，如:
var year= new Date().getYear();
year = (year<1900?(1900+year):year);
document.write(year);
也可以通過 getFullYear getUTCFullYear 去調(diào)用:
var year = new Date().getFullYear();
document.write(year);
2. eval()函數(shù)
【分析說明】在IE中，可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象；Firefox下只能使用getElementById("idName")來取得id為idName的HTML對象。
【兼容處理】統(tǒng)一用getElementById("idName")來取得id為idName的HTML對象。
3. const聲明
【分析說明】在 IE 中不能使用 const 關(guān)鍵字。如：
const constVar = 32;
在IE中這是語法錯誤。
【兼容處理】不使用 const ，以 var 代替。
4. var
【分析說明】請看以下代碼：
echo=function(str){
document.write(str);
}
這個函數(shù)在IE上運行正常，F(xiàn)irefox下卻報錯了。
【兼容處理】而在echo前加上var就正常了，這個就是我們提到var的目的。
5. const 問題
【分析說明】在 IE 中不能使用 const 關(guān)鍵字。如 const constVar = 32; 在IE中這是語法錯誤。
【解決方法】不使用 const ，以 var 代替。
二、樣式訪問和設(shè)置
1. CSS的"float"屬性
【分析說明】Javascript訪問一個給定CSS 值的最基本句法是：object.style.property，但部分CSS屬性跟Javascript中的保留字命名相同，如"float"，"for"，"class"等，不同瀏覽器寫法不同。
在IE中這樣寫：
document.getElementById("header").style.styleFloat = "left";
在Firefox中這樣寫：
document.getElementById("header").style.cssFloat = "left";
【兼容處理】在寫之前加一個判斷，判斷瀏覽器是否是IE：
if(document.all){
document.getElementById("header").style.styleFloat = "left";
}
else{
document.getElementById("header").style.cssFloat = "left";
}
2. 訪問<label>標(biāo)簽中的"for"
【分析說明】和"float"屬性一樣，同樣需要使用不現(xiàn)的句法區(qū)分來訪問<label>標(biāo)簽中的"for"。
在IE中這樣寫：
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
在Firefox中這樣寫：
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
【兼容處理】解決的方法也是先 判斷瀏覽器類型。
3. 訪問和設(shè)置class屬性
【分析說明】同樣由于class是Javascript保留字的原因，這兩種瀏覽器使用不同的 JavaScript 方法來獲取這個屬性。
IE8.0之前的所有IE版本的寫法：
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
適用于IE8.0 以及 firefox的寫法：
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
另外，在使用setAttribute()設(shè)置Class屬性的時候，兩種瀏覽器也存在同樣的差異。
setAttribute("className",value);
這種寫法適用于IE8.0之前的所有IE版本，注意：IE8.0也不支持"className"屬性了。
setAttribute("class",value);適用于IE8.0 以及 firefox。
【兼容處理】
方法一，兩種都寫上：
var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
//設(shè)置header的class為classValue
方法二，IE和FF都支持object.className，所以可以這樣寫：
var myObject = document.getElementById("header");
myObject.className="classValue";//設(shè)置header的class為classValue
方法三，先判斷瀏覽器類型，再根據(jù)瀏覽器類型采用對應(yīng)的寫法。
4. 對象寬高賦值問題
【分析說明】FireFox中類似 obj.style.height = imgObj.height 的語句無效。
【兼容處理】統(tǒng)一使用 obj.style.height = imgObj.height + ‘px';
三、DOM方法及對象引用
1. getElementById
【分析說明】先來看一組代碼：
<!-- input對象訪問1 -->
<input id="id" type="button"
value="click me" ōnclick="alert(id.value)"/>
在Firefox中，按鈕沒反應(yīng)，在IE中，就可以，因為對于IE來說，一個HTML 元素的 ID 可以直接在腳本中當(dāng)作變量名來使用，而Firefox中不可以。
【兼容處理】盡量采用W3C DOM 的寫法，訪問對象的時候，用document.getElementById("id") 以ID來訪問對象，且一個ID在頁面中必須是唯一的，同樣在以標(biāo)簽名來訪問對象的時候，用document.getElementsByTagName("div")[0] 。該方式得到較多瀏覽器的支持。
<!-- input對象訪問2 -->
<input id="id" type="button" value="click me"
onclick="alert(document.getElementById('id').value)" />
2. 集合類對象訪問
【分析說明】IE下，可以使用()或[]獲取集合類對象；Firefox下，只能使用[]獲取集合類對象。如：
document.write(document.forms("formName").src);
//該寫法在IE下能訪問到Form對象的scrc屬性
【兼容處理】將document.forms("formName")改為 document.forms["formName"]。統(tǒng)一使用[]獲取集合類對象。
3. frame的引用
【分析說明】IE可以通過id或者name訪問這個frame對應(yīng)的window對象，而Firefox只可以通過name來訪問這個frame對應(yīng)的window對象。
例如如果上述frame標(biāo)簽寫在最上層的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獲取父節(jié)點。而Firefox只可以使用parentNode。
【兼容處理】因為firefox與IE都支持DOM，因此統(tǒng)一使用parentNode來訪問父節(jié)點。
5. table操作
【分析說明】IE下table中無論是用innerHTML還是appendChild插入<tr>都沒有效果，而其他瀏覽器卻顯示正常。
【兼容處理】解決的方法是，將<tr>加到table的<tbody>元素中，如下面所示：
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("插入的內(nèi)容");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);
6. 移除節(jié)點removeNode()和removeChild()
【分析說明】appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用。
removeNode方法的功能是刪除一個節(jié)點，語法為node.removeNode（false）或者node.removeNode（true），返回值是被刪除的節(jié)點。
removeNode（false）表示僅僅刪除指定節(jié)點，然后這個節(jié)點的原孩子節(jié)點提升為原雙親節(jié)點的孩子節(jié)點。
removeNode（true）表示刪除指定節(jié)點及其所有下屬節(jié)點。被刪除的節(jié)點成為了孤立節(jié)點，不再具有有孩子節(jié)點和雙親節(jié)點。
【兼容處理】Firefox中節(jié)點沒有removeNode方法，只能用removeChild方法代替，先回到父節(jié)點，在從父節(jié)點上移除要移除的節(jié)點。
node.parentNode.removeChild(node);
// 為了在ie和firefox下都能正常使用，取上一層的父結(jié)點，然后remove。
7. childNodes獲取的節(jié)點
【分析說明】childNodes的下標(biāo)的含義在IE和Firefox中不同，看一下下面的代碼：
<ul id="main">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type=button value="click me!" onclick=
"alert(document.getElementById('main').childNodes.length)">
分別用IE和Firefox運行，IE的結(jié)果是3，而Firefox則是7。Firefox使用DOM規(guī)范，"#text"表示文本（實際是無意義的空格和換行等）在Firefox里也會被解析成一個節(jié)點，在IE里只有有實際意義的文本才會解析成"#text"。
【兼容處理】
方法一，獲取子節(jié)點時，可以通過node.getElementsByTagName()來回避這個問題。但是 getElementsByTagName對復(fù)雜的DOM結(jié)構(gòu)遍歷明顯不如用childNodes，因為childNodes能更好的處理DOM的層次結(jié)構(gòu)。
方法二，在實際運用中，F(xiàn)irefox在遍歷子節(jié)點時，不妨在for循環(huán)里加上：
if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。
這樣可以跳過一些文本節(jié)點。
延伸閱讀
《IE和FireFox中的childNodes區(qū)別》
8. Firefox不能對innerText支持
【分析說明】Firefox不支持innerText，它支持textContent來實現(xiàn)innerText，不過textContent沒有像innerText一樣考慮元素的display方式，所以不完全與IE兼容。如果不用textContent，字符串里面不包含HTML代碼也可以用innerHTML代替。也可以用js寫個方法實現(xiàn)，可參考《為firefox實現(xiàn)innerText屬性》一文。
【兼容處理】通過判斷瀏覽器類型來兼容：
if(document.all){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
四、事件處理
如果在使用javascript的時候涉及到event處理，就需要知道event在不同的瀏覽器中的差異，主要的JavaScript的事件模型有三種（參考《Supporting Three Event Models at Once》），它們分別是NN4、IE4+和W3C/Safar。
1. window.event
【分析說明】先看一段代碼
function et()
{
alert(event);//IE: [object]
}
以上代碼在IE運行的結(jié)果是[object]，而在Firefox無法運行。
因為在IE中event作為window對象的一個屬性可以直接使用，但是在Firefox中卻使用了W3C的模型，它是通過傳參的方法來傳播事件的，也就是說你需要為你的函數(shù)提供一個事件響應(yīng)的接口。
【兼容處理】添加對event判斷，根據(jù)瀏覽器的不同來得到正確的event：
function et()
{
evt=evt?evt:(window.event?window.event:null);
//兼容IE和Firefox
alert(evt);
}
2. 鍵盤值的取得
【分析說明】IE和Firefox獲取鍵盤值的方法不同，可以理解，F(xiàn)irefox下的event.which與IE下的event.keyCode相當(dāng)。關(guān)于彼此不同，可參考《鍵盤事件中keyCode、which和charCode 的兼容性測試》
【兼容處理】
function myKeyPress(evt){
//兼容IE和Firefox獲得keyBoardEvent對象
evt = (evt) ? evt : ((window.event) ? window.event : "")
//兼容IE和Firefox獲得keyBoardEvent對象的鍵值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
//同時按下了Ctrl和回車鍵
//do something;
}
}
3. 事件源的獲取
【分析說明】在使用事件委托的時候，通過事件源獲取來判斷事件到底來自哪個元素，但是，在IE下，event對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。
【兼容處理】
ele=function(evt){ //捕獲當(dāng)前事件作用的對象
evt=evt||window.event;
return
(obj=event.srcElement?event.srcElement:event.target;);
}
4. 事件監(jiān)聽
【分析說明】在事件監(jiān)聽處理方面，IE提供了attachEvent和detachEvent兩個接口，而Firefox提供的是addEventListener和removeEventListener。
【兼容處理】最簡單的兼容性處理就是封裝這兩套接口：
function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on" + eventName, function(){
handler.call(elem)});
//此處使用回調(diào)函數(shù)call()，讓this指向elem
} else if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false);
}
}
function removeEvent(elem, eventName, handler) {
if (elem.detachEvent) {
elem.detachEvent("on" + eventName, function(){
handler.call(elem)});
//此處使用回調(diào)函數(shù)call()，讓this指向elem
} else if (elem.removeEventListener) {
elem.removeEventListener(eventName, handler, false);
}
}
需要特別注意，F(xiàn)irefox下，事件處理函數(shù)中的this指向被監(jiān)聽元素本身，而在IE下則不然,可使用回調(diào)函數(shù)call，讓當(dāng)前上下文指向監(jiān)聽的元素。
5. 鼠標(biāo)位置
【分析說明】IE下，even對象有x，y屬性，但是沒有pageX，pageY屬性；Firefox下，even對象有pageX，pageY屬性，但是沒有x，y屬性。
【兼容處理】使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX。復(fù)雜點還要考慮絕對位置。
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}
五、其他差異的兼容處理
1. XMLHttpRequest
【分析說明】new ActiveXObject("Microsoft.XMLHTTP");只在IE中起作用，F(xiàn)irefox不支持，但支持XMLHttpRequest。
【兼容處理】
function createXHR() {
var xhr=null;
if(window.XMLHttpRequest){
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}else{
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
catch() {
xhr=null;
}
}
if(!xhr)return;
return xhr;
}
2. 模態(tài)和非模態(tài)窗口
【分析說明】IE中可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口，但是Firefox不支持。
【解決辦法】直接使用window.open(pageURL,name,parameters)方式打開新窗口。 如果需要傳遞參數(shù)，可以使用frame或者iframe。
3. input.type屬性問題
IE下 input.type屬性為只讀，但是Firefox下可以修改
4. 對select元素的option操作
設(shè)置options，IE和Firefox寫法不同：
Firefox:可直接設(shè)置
option.text = 'foooooooo';
IE:只能設(shè)置
option.innerHTML = 'fooooooo';
刪除一個select的option的方法：
Firefox:可以
select.options.remove(selectedIndex);
IE7:可以用
select.options[i] = null;
IE6:需要寫
select.options[i].outerHTML = null;
5. img對象alt和title的解析
【分析說明】img對象有alt和title兩個屬性，區(qū)別在于，alt：當(dāng)照片不存在或者load錯誤時的提示。
title：照片的tip說明, 在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在Firefox中，兩者完全按照標(biāo)準(zhǔn)中的定義使用
在定義img對象時。
【兼容處理】最好將alt和title對象都寫全，保證在各種瀏覽器中都能正常使用 。
6. img的src刷新問題
【分析說明】先看一下代碼：
<img id="pic" onclick= "this.src= 'a.jpg'"
src="aa.jpg" style="cursor: pointer"/>
在IE 下，這段代碼可以用來刷新圖片，但在FireFox下不行。主要是緩存問題。
【兼容處理】在地址后面加個隨機數(shù)就解決了:
<img id="pic" onclick= "javascript:this.src=this.src+'?'
+Math.random()"src="a.jpg" style="cursor: pointer"/>
總結(jié)
IE和Firefox的Javascript方面存在著不少的差異，要做到兼容，我覺得很有必要把一些常見的整理成一個js庫，如DOM的操作，事件的處理，XMLHttpRequest請求等，或者也可以選擇使用現(xiàn)有的一些庫(如jQuery，YUI，ExtJs等)，不過我覺得還是有必要了解一下這些差異，這樣對于我們參加兼容性和可用性代碼很有幫助。
辦法總比問題多，無論瀏覽器兼容如何折騰人，做前端開發(fā)的總能迎刃而解的！
一、函數(shù)和方法差異；
二、樣式訪問和設(shè)置；
三、DOM方法及對象引用；
四、事件處理；
五、其他差異的兼容處理。
一、函數(shù)和方法差異
1. getYear()方法
【分析說明】先看一下以下代碼：
復(fù)制代碼 代碼如下:
var year= new Date().getYear();
document.write(year);
在IE中得到的日期是"2010"，在Firefox中看到的日期是"110"，主要是因為在 Firefox 里面 getYear 返回的是 "當(dāng)前年份-1900" 的值。
【兼容處理】
加上對年份的判斷，如:
復(fù)制代碼 代碼如下:
var year= new Date().getYear();
year = (year<1900?(1900+year):year);
document.write(year);
也可以通過 getFullYear getUTCFullYear 去調(diào)用:
復(fù)制代碼 代碼如下:
var year = new Date().getFullYear();
document.write(year);
2. eval()函數(shù)
【分析說明】在IE中，可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象；Firefox下只能使用getElementById("idName")來取得id為idName的HTML對象。
【兼容處理】統(tǒng)一用getElementById("idName")來取得id為idName的HTML對象。
3. const聲明
【分析說明】在 IE 中不能使用 const 關(guān)鍵字。如：
const constVar = 32;
在IE中這是語法錯誤。
【兼容處理】不使用 const ，以 var 代替。
4. var
【分析說明】請看以下代碼：
復(fù)制代碼 代碼如下:
echo=function(str){
document.write(str);
}
這個函數(shù)在IE上運行正常，F(xiàn)irefox下卻報錯了。
【兼容處理】而在echo前加上var就正常了，這個就是我們提到var的目的。
5. const 問題
【分析說明】在 IE 中不能使用 const 關(guān)鍵字。如 const constVar = 32; 在IE中這是語法錯誤。
【解決方法】不使用 const ，以 var 代替。
二、樣式訪問和設(shè)置
1. CSS的"float"屬性
【分析說明】Javascript訪問一個給定CSS 值的最基本句法是：object.style.property，但部分CSS屬性跟Javascript中的保留字命名相同，如"float"，"for"，"class"等，不同瀏覽器寫法不同。
在IE中這樣寫：
document.getElementById("header").style.styleFloat = "left";
在Firefox中這樣寫：
document.getElementById("header").style.cssFloat = "left";
【兼容處理】在寫之前加一個判斷，判斷瀏覽器是否是IE：
if(document.all){
document.getElementById("header").style.styleFloat = "left";
}
else{
document.getElementById("header").style.cssFloat = "left";
}
2. 訪問<label>標(biāo)簽中的"for"
【分析說明】和"float"屬性一樣，同樣需要使用不現(xiàn)的句法區(qū)分來訪問<label>標(biāo)簽中的"for"。
在IE中這樣寫：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
在Firefox中這樣寫：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
【兼容處理】解決的方法也是先 判斷瀏覽器類型。
3. 訪問和設(shè)置class屬性
【分析說明】同樣由于class是Javascript保留字的原因，這兩種瀏覽器使用不同的 JavaScript 方法來獲取這個屬性。
IE8.0之前的所有IE版本的寫法：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
適用于IE8.0 以及 firefox的寫法：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
另外，在使用setAttribute()設(shè)置Class屬性的時候，兩種瀏覽器也存在同樣的差異。
setAttribute("className",value);
這種寫法適用于IE8.0之前的所有IE版本，注意：IE8.0也不支持"className"屬性了。
setAttribute("class",value);適用于IE8.0 以及 firefox。
【兼容處理】
方法一，兩種都寫上：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
//設(shè)置header的class為classValue
方法二，IE和FF都支持object.className，所以可以這樣寫：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
myObject.className="classValue";//設(shè)置header的class為classValue
方法三，先判斷瀏覽器類型，再根據(jù)瀏覽器類型采用對應(yīng)的寫法。
4. 對象寬高賦值問題
【分析說明】FireFox中類似 obj.style.height = imgObj.height 的語句無效。
【兼容處理】統(tǒng)一使用 obj.style.height = imgObj.height + ‘px';
三、DOM方法及對象引用
1. getElementById
【分析說明】先來看一組代碼：
復(fù)制代碼 代碼如下:
<!-- input對象訪問1 -->
<input id="id" type="button"
value="click me" ōnclick="alert(id.value)"/>
在Firefox中，按鈕沒反應(yīng)，在IE中，就可以，因為對于IE來說，一個HTML 元素的 ID 可以直接在腳本中當(dāng)作變量名來使用，而Firefox中不可以。
【兼容處理】盡量采用W3C DOM 的寫法，訪問對象的時候，用document.getElementById("id") 以ID來訪問對象，且一個ID在頁面中必須是唯一的，同樣在以標(biāo)簽名來訪問對象的時候，用document.getElementsByTagName("div")[0] 。該方式得到較多瀏覽器的支持。
復(fù)制代碼 代碼如下:
<!-- input對象訪問2 -->
<input id="id" type="button" value="click me"
onclick="alert(document.getElementById('id').value)" />
2. 集合類對象訪問
【分析說明】IE下，可以使用()或[]獲取集合類對象；Firefox下，只能使用[]獲取集合類對象。如：
復(fù)制代碼 代碼如下:
document.write(document.forms("formName").src);
//該寫法在IE下能訪問到Form對象的scrc屬性
【兼容處理】將document.forms("formName")改為 document.forms["formName"]。統(tǒng)一使用[]獲取集合類對象。
3. frame的引用
【分析說明】IE可以通過id或者name訪問這個frame對應(yīng)的window對象，而Firefox只可以通過name來訪問這個frame對應(yīng)的window對象。
例如如果上述frame標(biāo)簽寫在最上層的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獲取父節(jié)點。而Firefox只可以使用parentNode。
【兼容處理】因為firefox與IE都支持DOM，因此統(tǒng)一使用parentNode來訪問父節(jié)點。
5. table操作
【分析說明】IE下table中無論是用innerHTML還是appendChild插入<tr>都沒有效果，而其他瀏覽器卻顯示正常。
【兼容處理】解決的方法是，將<tr>加到table的<tbody>元素中，如下面所示：
復(fù)制代碼 代碼如下:
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("插入的內(nèi)容");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);
6. 移除節(jié)點removeNode()和removeChild()
【分析說明】appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用。
removeNode方法的功能是刪除一個節(jié)點，語法為node.removeNode（false）或者node.removeNode（true），返回值是被刪除的節(jié)點。
removeNode（false）表示僅僅刪除指定節(jié)點，然后這個節(jié)點的原孩子節(jié)點提升為原雙親節(jié)點的孩子節(jié)點。
removeNode（true）表示刪除指定節(jié)點及其所有下屬節(jié)點。被刪除的節(jié)點成為了孤立節(jié)點，不再具有有孩子節(jié)點和雙親節(jié)點。
【兼容處理】Firefox中節(jié)點沒有removeNode方法，只能用removeChild方法代替，先回到父節(jié)點，在從父節(jié)點上移除要移除的節(jié)點。
node.parentNode.removeChild(node);
// 為了在ie和firefox下都能正常使用，取上一層的父結(jié)點，然后remove。
7. childNodes獲取的節(jié)點
【分析說明】childNodes的下標(biāo)的含義在IE和Firefox中不同，看一下下面的代碼：
復(fù)制代碼 代碼如下:
<ul id="main">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type=button value="click me!" onclick=
"alert(document.getElementById('main').childNodes.length)">
分別用IE和Firefox運行，IE的結(jié)果是3，而Firefox則是7。Firefox使用DOM規(guī)范，"#text"表示文本（實際是無意義的空格和換行等）在Firefox里也會被解析成一個節(jié)點，在IE里只有有實際意義的文本才會解析成"#text"。
【兼容處理】
方法一，獲取子節(jié)點時，可以通過node.getElementsByTagName()來回避這個問題。但是 getElementsByTagName對復(fù)雜的DOM結(jié)構(gòu)遍歷明顯不如用childNodes，因為childNodes能更好的處理DOM的層次結(jié)構(gòu)。
方法二，在實際運用中，F(xiàn)irefox在遍歷子節(jié)點時，不妨在for循環(huán)里加上：
if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。
這樣可以跳過一些文本節(jié)點。
延伸閱讀
《IE和FireFox中的childNodes區(qū)別》
8. Firefox不能對innerText支持
【分析說明】Firefox不支持innerText，它支持textContent來實現(xiàn)innerText，不過textContent沒有像innerText一樣考慮元素的display方式，所以不完全與IE兼容。如果不用textContent，字符串里面不包含HTML代碼也可以用innerHTML代替。也可以用js寫個方法實現(xiàn)，可參考《為firefox實現(xiàn)innerText屬性》一文。
【兼容處理】通過判斷瀏覽器類型來兼容：
復(fù)制代碼 代碼如下:
if(document.all){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
四、事件處理
如果在使用javascript的時候涉及到event處理，就需要知道event在不同的瀏覽器中的差異，主要的JavaScript的事件模型有三種（參考《Supporting Three Event Models at Once》），它們分別是NN4、IE4+和W3C/Safar。
1. window.event
【分析說明】先看一段代碼
復(fù)制代碼 代碼如下:
function et()
{
alert(event);//IE: [object]
}
以上代碼在IE運行的結(jié)果是[object]，而在Firefox無法運行。
因為在IE中event作為window對象的一個屬性可以直接使用，但是在Firefox中卻使用了W3C的模型，它是通過傳參的方法來傳播事件的，也就是說你需要為你的函數(shù)提供一個事件響應(yīng)的接口。
【兼容處理】添加對event判斷，根據(jù)瀏覽器的不同來得到正確的event：
復(fù)制代碼 代碼如下:
function et()
{
evt=evt?evt:(window.event?window.event:null);
//兼容IE和Firefox
alert(evt);
}
2. 鍵盤值的取得
【分析說明】IE和Firefox獲取鍵盤值的方法不同，可以理解，F(xiàn)irefox下的event.which與IE下的event.keyCode相當(dāng)。關(guān)于彼此不同，可參考《鍵盤事件中keyCode、which和charCode 的兼容性測試》
【兼容處理】
復(fù)制代碼 代碼如下:
function myKeyPress(evt){
//兼容IE和Firefox獲得keyBoardEvent對象
evt = (evt) ? evt : ((window.event) ? window.event : "")
//兼容IE和Firefox獲得keyBoardEvent對象的鍵值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
//同時按下了Ctrl和回車鍵
//do something;
}
}
3. 事件源的獲取
【分析說明】在使用事件委托的時候，通過事件源獲取來判斷事件到底來自哪個元素，但是，在IE下，event對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。
【兼容處理】
復(fù)制代碼 代碼如下:
ele=function(evt){ //捕獲當(dāng)前事件作用的對象
evt=evt||window.event;
return
(obj=event.srcElement?event.srcElement:event.target;);
}
4. 事件監(jiān)聽
【分析說明】在事件監(jiān)聽處理方面，IE提供了attachEvent和detachEvent兩個接口，而Firefox提供的是addEventListener和removeEventListener。
【兼容處理】最簡單的兼容性處理就是封裝這兩套接口：
復(fù)制代碼 代碼如下:
function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on" + eventName, function(){
handler.call(elem)});
//此處使用回調(diào)函數(shù)call()，讓this指向elem
} else if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false);
}
}
function removeEvent(elem, eventName, handler) {
if (elem.detachEvent) {
elem.detachEvent("on" + eventName, function(){
handler.call(elem)});
//此處使用回調(diào)函數(shù)call()，讓this指向elem
} else if (elem.removeEventListener) {
elem.removeEventListener(eventName, handler, false);
}
}
需要特別注意，F(xiàn)irefox下，事件處理函數(shù)中的this指向被監(jiān)聽元素本身，而在IE下則不然,可使用回調(diào)函數(shù)call，讓當(dāng)前上下文指向監(jiān)聽的元素。
5. 鼠標(biāo)位置
【分析說明】IE下，even對象有x，y屬性，但是沒有pageX，pageY屬性；Firefox下，even對象有pageX，pageY屬性，但是沒有x，y屬性。
【兼容處理】使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX。復(fù)雜點還要考慮絕對位置。
復(fù)制代碼 代碼如下:
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}
五、其他差異的兼容處理
1. XMLHttpRequest
【分析說明】new ActiveXObject("Microsoft.XMLHTTP");只在IE中起作用，F(xiàn)irefox不支持，但支持XMLHttpRequest。
【兼容處理】
復(fù)制代碼 代碼如下:
function createXHR() {
var xhr=null;
if(window.XMLHttpRequest){
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}else{
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
catch() {
xhr=null;
}
}
if(!xhr)return;
return xhr;
}
2. 模態(tài)和非模態(tài)窗口
【分析說明】IE中可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口，但是Firefox不支持。
【解決辦法】直接使用window.open(pageURL,name,parameters)方式打開新窗口。 如果需要傳遞參數(shù)，可以使用frame或者iframe。
3. input.type屬性問題
IE下 input.type屬性為只讀，但是Firefox下可以修改
4. 對select元素的option操作
設(shè)置options，IE和Firefox寫法不同：
Firefox:可直接設(shè)置
option.text = 'foooooooo';
IE:只能設(shè)置
option.innerHTML = 'fooooooo';
刪除一個select的option的方法：
Firefox:可以
select.options.remove(selectedIndex);
IE7:可以用
select.options[i] = null;
IE6:需要寫
select.options[i].outerHTML = null;
5. img對象alt和title的解析
【分析說明】img對象有alt和title兩個屬性，區(qū)別在于，alt：當(dāng)照片不存在或者load錯誤時的提示。
title：照片的tip說明, 在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在Firefox中，兩者完全按照標(biāo)準(zhǔn)中的定義使用
在定義img對象時。
【兼容處理】最好將alt和title對象都寫全，保證在各種瀏覽器中都能正常使用 。
6. img的src刷新問題
【分析說明】先看一下代碼：
復(fù)制代碼 代碼如下:
<img id="pic" onclick= "this.src= 'a.jpg'"
src="aa.jpg" style="cursor: pointer"/>
在IE 下，這段代碼可以用來刷新圖片，但在FireFox下不行。主要是緩存問題。
【兼容處理】在地址后面加個隨機數(shù)就解決了:
復(fù)制代碼 代碼如下:
<img id="pic" onclick= "javascript:this.src=this.src+'?'
+Math.random()"src="a.jpg" style="cursor: pointer"/>
總結(jié)
IE和Firefox的Javascript方面存在著不少的差異，要做到兼容，我覺得很有必要把一些常見的整理成一個js庫，如DOM的操作，事件的處理，XMLHttpRequest請求等，或者也可以選擇使用現(xiàn)有的一些庫(如jQuery，YUI，ExtJs等)，不過我覺得還是有必要了解一下這些差異，這樣對于我們參加兼容性和可用性代碼很有幫助。
辦法總比問題多，無論瀏覽器兼容如何折騰人，做前端開發(fā)的總能迎刃而解的！
您可能感興趣的文章:
- JS的IE和Firefox兼容性集錦
- IE與Firefox下javascript getyear年份的兼容性寫法
- IE和Firefox在JavaScript應(yīng)用中的兼容性探討
- JS IE和FF兼容性問題匯總
- Javascript 多瀏覽器兼容性問題及解決方案
- js 實用的無間斷滾動圖效果(良好兼容性)
- 兼容性非常好的js右下角與漂浮廣告代碼
- 多瀏覽器兼容性比較好的復(fù)制到剪貼板的js代碼
- 利用Javascript判斷操作系統(tǒng)的類型實現(xiàn)不同操作系統(tǒng)下的兼容性
- 原生javascript兼容性測試實例
- Javascript selection的兼容性寫法介紹
- js日期對象兼容性的處理方法
- css與javascript跨瀏覽器兼容性總結(jié)
- JavaScript 瀏覽器兼容性總結(jié)及常用瀏覽器兼容性分析
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了基于javascript制作微信聊天面板的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了JS實現(xiàn)間歇滾動的運動效果,涉及javascript定時器觸發(fā)動態(tài)改變頁面元素的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
下面小編就為大家?guī)硪黄猨s排序與重組的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
近期在寫一個博客管理后臺的前端,涉及在同一頁面兩種高亮顯示當(dāng)前菜單的需求.2010-06-06
最近遇到這樣的需求：顯示音樂播放按鈕、可手動拖拽進度條；頁面中含多個音樂，播放當(dāng)前音樂時暫停其他音樂播放。 這篇文章主要介紹了微信小程序自定義音樂進度條的實例代碼,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了如何在微信小程序中存setStorage,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
JavaScript股票的動態(tài)買賣規(guī)劃實例分析下篇
這篇文章主要介紹了JavaScript對于動態(tài)規(guī)劃解決股票問題的真題例舉講解。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
JavaScript中“過于”犀利地for/in循環(huán)使用示例
Java中的增強for循環(huán)很是好用，但是JavaScript中為我們提供的for/in循環(huán)已然不是這么簡單了，下面有個簡單的示例，大家不妨參考下2013-10-10
最近在一個微信公眾號中用到了swiper圖片輪播插件。接下來為大家介紹插件的用法,需要的朋友可以參考下2017-01-01
JavaScript延時效果比較不錯的...2007-08-08