|
|
在以往使用Ajax的經歷中，你很可能會使用JavaScript向現有的表中追加行，或者從頭創建包含表行的新表。document.createElement和document.appendChiid方法可以使這很容易做到,只需使用document.createElement創建表單元格,再使用document.app-endChild方法將這些表單元格增加到表行。接下來的編輯步驟是使用document.append-
Child將表行增加到表中。
在Firefox、Safari和Opera等當前瀏覽器中,這樣做是可以的。不過,如果使用的是lE，表行則不會在表中出現。更糟糕的是，IE甚至不拋出任何錯誤，或對表行確實已經追加到表中卻不會顯示出來的問題提供任何線索。
在這種情況下，解決方法很簡單。IE允許將tr元素增加到tbody元素，而不是直接增加到table元素。例如，如果定義一個空表如下：
<table id="myTable">
<tbody id="myTableBody"></tbody>
</table>
向這個表中增加行的正確做法是把行增加到表體，而不是增加到表，如下所示：
var cell=document.createElement("td").appendChild(document.createTextNode("foo"));
vat row=document.createElement("tr").appendChild(cell);
document.getElementByld("myTableBody").appendChiid(row);
辛運的是，這種方法在所有當前瀏覽器上都能用，也包括IE。如果你養成習慣，總是使用表中的表體，就不用擔心這個問題了。
二 通過Javascript設置元素的樣式
利用Ajax技術，開發人員創建的Web應用可以與服務器無縫地通信，而無需完全頁面刷新。但對于A1ax請求，是不會出現這種頁面閃爍的，所以用戶可能不知道頁面上有些數據已經更新。你可能想修改某些元素的樣式，指示頁面上一些數據已經改變。例如，如果股票的價格已經通過Ajax請求得到了無縫更新，可以加亮顯示這支股票的名字。
可以通過JavaScript使用元素的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:bold; 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:bold; color:red;";
這樣一來，在當前所有瀏覽器上都能正常地設置元素的樣式了。
三、設置元素的class屬性
讀過前一節后，了解到可以通過JavaScript來設置元素的內聯樣式，你可能想當然地認為，簡單地設置無素的class屬件應該是最容易的了。遺憾的是，并不如此。與設置元素內聯樣式類似，通過JavaScript動態地設置元素的class屬性時也存在一些特異性。
你可能已經猜到了，IE是當前瀏覽器中的一個異類，不過解決方法倒也相當簡單。使用Firefox和Safari之類的瀏覽器時，可以使用元素的setAttribute方法來設置冗素的class屬性，如下所示：
var element = document.getElementById("myElement");
element.setAttribute("class", "styleC1ass");
奇怪的是，如果使用setAttribute方法，并指定屬性名為class，IE并不會設置元素的class屬性。相反，只使用setAttribute方法時IE會自己識別className屬性。對于這種情況，完備的解決方法是：使用元素的setAttribute方法時，將class和className都用作屬性名，如下所不：
var element = document.getElementById("myElement");
element.setAttribute("class", "styleC1ass");
element.setAttribute("className", "styleC1ass");
當前大多數瀏覽器都會使用class屬性名而忽略className，IE則正好相反。
四、創建輸入元素
輸入元素為用戶提供了與頁面交互的手段。HTML本身有一組有限的輸入元素，包括單行文本框、多行文本框、選擇框、按鈕、復選框和單選鈕。你可能想使用JavaScfipt動態地刨建這樣一些輸入元素作為Ajax實現的一部分。
單行文本框、按鈕、復選框和單選鈕都可以創建為輸入元素，只是type屬性的值有所不同。選擇框和文本區有自己特有的標記。通過JavaScript動態地創建輸入元素很簡單(但單選鈕除外，這在“刨建單選鈕”一節再做解釋)，只要遵循一些簡單的規則就行。使用document.createElement方法可以很容易地創建選擇框和文本區，只需向document.cr
eateElement傳遞元素的標記名，如select或textarea。
單行文本框、按鈕、復選框和單選鈕稍難一些，因為它們都有同樣的元素名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(button);
遵循這個簡單的規則，有助于消除以后可能出現的一些難于診斷的問題。
五 向輸入元素增加事情處理程序
向輸入元素增加事件處理程序應該與使用setAttribute方法并指定事件處理程序的名字和所需函數處理程序的名字一樣容易，對嗎?錯。設置元素的事件處理程序的標準做法是使用元素的setAttribute方法，它以事件名作為屬性名，并把函數處理程序作為屬性值．如下所示：
var formElement = document,getElementById("formElement");
formElement.setAttribute("onclick", "doFoo();");
除了IE上面的代碼在所有當前瀏覽器中都能工作。如果在IE中使用JavaScfipt設置元素的事件處理程序，必須對元素使用點記法來引用所需的事件處理程序，非把它賦為匿名函數，這個匿名函數需要調用所需的事什處理程序，如下所示：
var formElement = document,getElementById("formElement");
formElement.onclick = function() { doFoo(); };
注意，是如何通過點記法從formElement引用onclick事件處理程序。onclick事什處理程序賦為一個匿名函數，這個匿名函數只是調用了所需的事件處理程序．在這個例子中事件處理程序就是doFoo。
幸運的是，這種技術得到了IE和所有其他當前瀏覽器的支持．所以完全可以通過JavaScfipt動態地設置表單元素的事件處理程序。
六、創建單選按鈕
最好的總是留在最后。通過JavaScript動態地創建單選鈕是很費勁的，因為IE中創建單選鈕的方法與其他瀏覽器所用的方法大相徑庭。
除了IE，當前所有其他瀏覽器都允許使用以下方法創建單選鈕(這些方法應該能想得到)：
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radlo");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
這樣就能在除IE以外的所有當前瀏覽器中創建單選選鈕，而且能正常工作。在lE中，單選鈕確實會顯示出來．但是無法將其選中，因為點擊單選鈕行不按我們預想得那樣使之選中。在IE中，創建單選鈕的方法與其他瀏覽器所用的方法完全不同，而且根本不兼容。對于前面建立的單選鈕，在IE中可以如下建立：
var radioButton = decument.createElement("<input type='radio'
name='radioButton' value='checked'>");
好在，IE中確實可以通過JavaScript動態地創建單選鈕，只不過難些，而且與其他瀏覽器不兼容。
如何克服這個限制呢?答案很簡單，這就是需要某種瀏覽器嗅探(browser-sniffing)機制，使得在創建單選鈕時腳本就能知道該使用哪個方法。幸運的是，你不用檢查大量不同的瀏覽器。假設只使用現代瀏覽器，腳本只需要在IE和其他瀏覽器間進行區分就行了。
IE能識別出名為uniqueID的document對象的專用屬性，名為uniqueID。IE也是惟一能識別這個屬性的瀏覽器，所以uniqueID很適合用來確定腳本是不是在IE中運行。
使用docurnent.uniqueID屬性來確定腳本在哪個瀏覽器中運行時，可以結合IE特定的辦法和標準兼容的方法，這就會得到以下代碼：
if(document.uniqueID) {
//InterNET Explorer
var radioButton = decument.createElement("<input type='radio'
name='radioButton' value='checked'>");
}
else {
//Standards Compliant
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radlo");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
}
JavaScript技術：開發跨瀏覽器javascript常見注意事項，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
