1. 程式人生 > >firefox與ie的javascript區別

firefox與ie的javascript區別

開發跨瀏覽器的JavaScript

1. childNodes在ff中和ie的區別。

ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分開的,而ie/op不是這樣的。

<div id="box1"><span>content</span></div>

在ff下,box1的childNodes為3個,ie下為1個。

2. 設定某個node物件的style class名稱。

ie中要設定某個node的class用"className"作為attr來set或者get。

ff等其它的瀏覽器用"class"作為attr來set或者get。

程式碼:

if(typeof node1.getAttribute("className") == "string") {

....

}

3. 設定某個node物件的style content。

直接舉例把

程式碼:

      var oStyle = oNode.getAttribute("style");

// ie

   if(oStyle == "[object]") {

      oStyle.setAttribute("cssText", strStyle);

      oNode.setAttribute("style", oStyle);

   } else {

      oNode.setAttribute("style", strStyle);

   }

4. 事件物件。

ie用event

ff用evnt

5. 事件作用物件

ie用objEvent.srcElement

ff用objEvent.target

這個跟 xml 檔案寫作有關,將 IE 的 preserveWhiteSpace 設為 true 看看,底下是取自微軟的說明檔案

程式碼:

var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.4.0");

xmlDoc.async = false;

xmlDoc.preserveWhiteSpace = true;

xmlDoc.load("books.xml");

alert(xmlDoc.xml);

xmlDoc.async = false;

xmlDoc.preserveWhiteSpace = false;

xmlDoc.load("books.xml");

alert(xmlDoc.xml);

-----------------------

1.向表中追加行:

document.createElement 和document.appendChild方法可以很容易的做到向表中追加行或從頭建立包含錶行的新表:使用 document.createElement建立表格,在使用document.appendChild方法將這些表單元格增加到錶行;接下來使用 document.appendChild將錶行增加到表中。

IE允許講tr元素增加到tbody中,而不是直接增加到table中。

<table id="myTable">

<tbody id="myTableBody"></tbody>

</table>

向這個表中增加行的正確做法是把行增加到表體,而不是增加到表,如是所示:

var cell=document.createElement("td").appendChild(document.createTextNode("foo");

var row = document.createElement("tr").appendChild(cell);

document.getElementById("mysqlTableBody").appendChild(row);

幸運的是,這種方法在所有當前瀏覽器都通用,也包括IE。如果你養成習慣,總是使用表中的表體,就不用擔心這個問題了。

2 通過Javascrīpt設定元素的樣式

可以通過Javascrīpt使用元素的setAttribute方法設定元素的樣式。例如,要把span 元素中的文字修改為採用紅色粗體顯示,可以使用setAttribute方法如下:

var spanElement = document.getElementById("mySpan");

spanElement.setAttribute("style","font-weight:bold ; color: red;");

除了IE,這種方法在當前其它瀏覽器上都是行得通的.對於IE,解決方法是使用元素 style物件的cssText屬性來設定所需樣式,儘管這個屬性不是標準的,但是得到廣泛支援,如下所示:

var spanElement = document.getElementById("mySpan");

spanElement.style.cssText = "font-weight:blod ; color:red;";

這種方法在IE和大多數其他瀏覽器上都能很好好工作,只有Opera除外。為了讓程式碼在所有當前瀏覽器上都可移植,可以同時使用這兩種方法,也就是既使用setAttribute方法,又使用style對像的cssText屬性,如下所示:

var spanElement = document.getElementById("mySpan");

spanElement.setAttribute("style","font-weight:bold ; color: red;");

spanElement.style.cssText = "font-weight:blod ; color:red;";

3 設定元素的class屬性

IE是當前瀏覽器的一個異類,不過解決方法倒也相當簡單,使用FirefoxSafari 類的瀏覽時,可以使用元素的setArribute方法來設定元素的class屬性,如下所示:

var element = document.getElementById("myElement");

element.setAttribute("class","styleClass");

奇怪的是,如果使用setAttribute方法,並指定屬性名為classIE並不會設定元素的 class屬性。相反,只使用setAttribute方法時IE會自己識別className屬性。

對於這種情況,完備的解決方法是:使用元素的setAttribute方法時,將class className都用作屬性名,如下所示:

var element = document.getElementById("myElement");

element.setAttribute("class","styleClass");

element.setAttribute("className","styleClass");

當前大多數瀏覽器都會使用class屬性名而忽略className,IE則正好相反。

4 建立輸入元素

   輸入元素為使用者提供了頁面互動的手段,HTML本身有一組有限的輸入元素,包括單行文框、多行文字框、選擇框、選擇框、按鈕、複選框和單行鈕。你可能想使用Javascrīpt 動態地建立這樣一些輸入元素作為Ajax實現的一部分。

   單行文字框、按鈕、複選框和單選鈕都可以建立為輸入元素,只是type屬性的值有所不同。選擇框和文字區有自己特有的標記,通過Javascrīpt動態建立輸入元素很簡單(但單選鈕除外),只要遵循一些簡單的規則就行。使用document.createElement方法可以很容易建立選擇框和文字區,只需向document.createElement傳遞元素的標記名,如selecttextarea

單行文字框、按鈕、複選框和單選鈕稍難一點,因為它們都有同樣的元素名input,只type屬性的值不同。所以,要建立這些元素,不僅需要使用document.createElement方法,後面還要呼叫元素的setAttribute方法來設定type屬性的值。這並不難,但確實要多加一行程式碼。

   考慮在哪裡把新建立的輸入元素增加到其父元素中,必須注意document.createElement setAttribute語句的順序。在某些瀏覽器中,只有建立了元素,而且正確設定了type性時,才會把新建立的元素增加到其父元素中。例如,以下程式碼段在某些瀏覽器中可能有奇怪的行為:

document.getElementById("formElement").appendChild(button);

button.setAttribute("type","button");

為了避免奇怪的行為,要確保建立輸入元素的一設定其所有屬性,特別是type屬性,如下:

var button = document.createElement("input");

button.setAttribute("type","button");

document.getElementById("formElement").appendChild(buttion);

遵循這個簡單的規則,有助於消除以後可能出現的一些難於診斷的問題。

5.向輸入元素增加事件處理程式

向輸入元素增加事件處理程式應該與使用setAttribute方法並指定事件程式的名字和所需函式程式的名字一樣容易,對嗎?錯。設定元素的事件處理程式的標準做法是使用元素的 setAttribute方法,它以事件名作為屬性名,並把函式處理程式作為屬性值,如下所示:

var formElement = document.getElementById("formElement");

formElement.setAttribute("onclick","doFoo();");

除了IE,上面的程式碼在所有當前瀏覽器中都能工作,如果在IE中使用Javascrīpt設定的事件處理程式,必須對元素使用點記法來引用所需的事件處理程式,並把它賦為匿名函式,這個匿名函式要呼叫所需要的事件處理程式,如下所示:

var formElement = documentgetElementById("formElement");

formElement.onclick = function(){ doFoo(); };

幸運的是,這種技術得到了IE和所有其他當前瀏覽器的支援,所以完全可以通過 Javascrīpt動態地設定表單元素的事件處理程式。

6 建立單選鈕

除了IE,當前所有其他瀏覽器都允許使用以下方法建立單選鈕(這些方法應該能想到);

var readioButtion = document.createElement("input");

readioButtion.setAttribute("type","radio");

readioButtion.setAttribute("name","radioButtion");

readioButtion.setAttribute("value","checked");

這樣就能在除IE以外的所有當前瀏覽器中建立單選鈕,而且能正常工作。在IE中,單選鈕確實會顯示出來,但是無法將其選中,因為點選單選鈕並不按我們預想得那樣使之選中。在IE中,建立單行鈕的方法與其他瀏覽器所用的方法完全不同,而且根本不相容。對於前面建立的單選鈕,在IE中可以如下建立:

var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>");

這就需要某種瀏覽器嗅探(browser-sniffing)機制。IE能識別出名為uniqueIDdocument物件的專用屬性,名為uniqueIDIE也是惟一能識別這個屬性的瀏覽器,所以uniqueID很適合來確定指令碼是不是在IE中執行。

使用document.uniqueID屬性來確定指令碼在哪個瀏覽器中執行時,可以結合IE特定的方法和標準相容的方法,就會得到以下程式碼:

if(document.uniqueID){

//Internet Explorer

var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>");

}

else{

//Standards Compliant

var readioButtion = document.createElement("input");

readioButtion.setAttribute("type","radio");

readioButtion.setAttribute("name","radioButtion");

readioButtion.setAttribute("value","checked");

}