一、向表追加行
在以往使用Ajax的經(jīng)歷中，你很可能會(huì)使用JavaScript向現(xiàn)有的表中追加行，或者從頭創(chuàng)建包含表行的新表。document.createElement和document.appendChiid方法可以使這很容易做到,只需使用document.createElement創(chuàng)建表單元格,再使用document.app-endChild方法將這些表單元格增加到表行。接下來的編輯步驟是使用document.append-
Child將表行增加到表中。
在Firefox、Safari和Opera等當(dāng)前瀏覽器中,這樣做是可以的。不過,如果使用的是lE，表行則不會(huì)在表中出現(xiàn)。更糟糕的是，IE甚至不拋出任何錯(cuò)誤，或?qū)Ρ硇写_實(shí)已經(jīng)追加到表中卻不會(huì)顯示出來的問題提供任何線索。
在這種情況下，解決方法很簡單。IE允許將tr元素增加到tbody元素，而不是直接增加到table元素。例如，如果定義一個(gè)空表如下：
<table id="myTable">
<tbody id="myTableBody"></tbody>
</table>
向這個(gè)表中增加行的正確做法是把行增加到表體，而不是增加到表，如下所示：
var cell=document.createElement("td").appendChild(document.createTextNode("foo"));
vat row=document.createElement("tr").appendChild(cell);
document.getElementByld("myTableBody").appendChiid(row);
辛運(yùn)的是，這種方法在所有當(dāng)前瀏覽器上都能用，也包括IE。如果你養(yǎng)成習(xí)慣，總是使用表中的表體，就不用擔(dān)心這個(gè)問題了。
二 通過javascript設(shè)置元素的樣式
利用Ajax技術(shù)，開發(fā)人員創(chuàng)建的Web應(yīng)用可以與服務(wù)器無縫地通信，而無需完全頁面刷新。但對于A1ax請求，是不會(huì)出現(xiàn)這種頁面閃爍的，所以用戶可能不知道頁面上有些數(shù)據(jù)已經(jīng)更新。你可能想修改某些元素的樣式，指示頁面上一些數(shù)據(jù)已經(jīng)改變。例如，如果股票的價(jià)格已經(jīng)通過Ajax請求得到了無縫更新，可以加亮顯示這支股票的名字。
可以通過JavaScript使用元素的setAttribute方法設(shè)置元素的樣式。例如，要把span元素中的文本修改為采用紅色粗體顯示．可以使用setAttribute療法如下：
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style", "font-weight:bold; color:red;");
除了IE、這種方法在當(dāng)前其他瀏覽器上都是行得通的。對于IE，解決方法是使用元素style對象的cssText屬性來設(shè)置所需的樣式．盡管這個(gè)屬性不是標(biāo)準(zhǔn)的，但得到了廣泛支持，如下所示：
var spanElement = document.getElementById("mySpan");
spanElement.style.cssText = "font-weight:bold; color:red;";
這種方法在IE和大多數(shù)其他瀏覽器上部能很好地工作，只有Opera除外。為了讓代碼在所有當(dāng)前瀏覽器上都可移植，可以同時(shí)使用這兩種方法，也就是既使用setAttribute方法，也使用元素style對象的cssText屬性，如下所示：
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style", "font-weight:bold; color:red;");
spanElement.style.cssText = "font-weight:bold; color:red;";
這樣一來，在當(dāng)前所有瀏覽器上都能正常地設(shè)置元素的樣式了。
三、設(shè)置元素的class屬性
讀過前一節(jié)后，了解到可以通過JavaScript來設(shè)置元素的內(nèi)聯(lián)樣式，你可能想當(dāng)然地認(rèn)為，簡單地設(shè)置無素的class屬件應(yīng)該是最容易的了。遺憾的是，并不如此。與設(shè)置元素內(nèi)聯(lián)樣式類似，通過JavaScript動(dòng)態(tài)地設(shè)置元素的class屬性時(shí)也存在一些特異性。
你可能已經(jīng)猜到了，IE是當(dāng)前瀏覽器中的一個(gè)異類，不過解決方法倒也相當(dāng)簡單。使用Firefox和Safari之類的瀏覽器時(shí)，可以使用元素的setAttribute方法來設(shè)置冗素的class屬性，如下所示：
var element = document.getElementById("myElement");
element.setAttribute("class", "styleC1ass");
奇怪的是，如果使用setAttribute方法，并指定屬性名為class，IE并不會(huì)設(shè)置元素的class屬性。相反，只使用setAttribute方法時(shí)IE會(huì)自己識別className屬性。對于這種情況，完備的解決方法是：使用元素的setAttribute方法時(shí)，將class和className都用作屬性名，如下所不：
var element = document.getElementById("myElement");
element.setAttribute("class", "styleC1ass");
element.setAttribute("className", "styleC1ass");
當(dāng)前大多數(shù)瀏覽器都會(huì)使用class屬性名而忽略className，IE則正好相反。
四、創(chuàng)建輸入元素
輸入元素為用戶提供了與頁面交互的手段。HTML本身有一組有限的輸入元素，包括單行文本框、多行文本框、選擇框、按鈕、復(fù)選框和單選鈕。你可能想使用JavaScfipt動(dòng)態(tài)地刨建這樣一些輸入元素作為Ajax實(shí)現(xiàn)的一部分。
單行文本框、按鈕、復(fù)選框和單選鈕都可以創(chuàng)建為輸入元素，只是type屬性的值有所不同。選擇框和文本區(qū)有自己特有的標(biāo)記。通過JavaScript動(dòng)態(tài)地創(chuàng)建輸入元素很簡單(但單選鈕除外，這在“刨建單選鈕”一節(jié)再做解釋)，只要遵循一些簡單的規(guī)則就行。使用document.createElement方法可以很容易地創(chuàng)建選擇框和文本區(qū)，只需向document.cr
eateElement傳遞元素的標(biāo)記名，如select或textarea。
單行文本框、按鈕、復(fù)選框和單選鈕稍難一些，因?yàn)樗鼈兌加型瑯拥脑孛鹖nput，只是type屬性的值不同。所以，要?jiǎng)?chuàng)建這些元素，不僅需要使用document.createElement方法，后面還要調(diào)用元素的setAttribute方法來設(shè)置type屬性的值。這并不難，但確實(shí)要多加一行代碼．
考慮在哪里把新創(chuàng)建的輸入元素增加到其父元素中，必須注意document.createElement和setAttribute語句的順序。在某些瀏覽器中，只有刨建了元素，而且正確地設(shè)置了type屬性時(shí)，于會(huì)把新創(chuàng)建的元素增加到其父元素中。例如，以下代碼段存某些瀏覽器中可能有奇怪的行為：
document.getElementById("formElement").appendChild(button);
button.setAttribute("type", "button");
為了避免奇怪的行為，要確保刨建輸入元素后設(shè)置其所有屬性，特別是type屬性，然后再把它增加到父元素中，如下：
var button = document.createElement("input"):
button.setAttribute("type", "button");
document.getElementById("formElement").appendChild(button);
遵循這個(gè)簡單的規(guī)則，有助于消除以后可能出現(xiàn)的一些難于診斷的問題。
五 向輸入元素增加事情處理程序
向輸入元素增加事件處理程序應(yīng)該與使用setAttribute方法并指定事件處理程序的名字和所需函數(shù)處理程序的名字一樣容易，對嗎?錯(cuò)。設(shè)置元素的事件處理程序的標(biāo)準(zhǔn)做法是使用元素的setAttribute方法，它以事件名作為屬性名，并把函數(shù)處理程序作為屬性值．如下所示：
var formElement = document,getElementById("formElement");
formElement.setAttribute("onclick", "doFoo();");
除了IE上面的代碼在所有當(dāng)前瀏覽器中都能工作。如果在IE中使用JavaScfipt設(shè)置元素的事件處理程序，必須對元素使用點(diǎn)記法來引用所需的事件處理程序，非把它賦為匿名函數(shù)，這個(gè)匿名函數(shù)需要調(diào)用所需的事什處理程序，如下所示：
var formElement = document,getElementById("formElement");
formElement.onclick = function() { doFoo(); };
注意，是如何通過點(diǎn)記法從formElement引用onclick事件處理程序。onclick事什處理程序賦為一個(gè)匿名函數(shù)，這個(gè)匿名函數(shù)只是調(diào)用了所需的事件處理程序．在這個(gè)例子中事件處理程序就是doFoo。
幸運(yùn)的是，這種技術(shù)得到了IE和所有其他當(dāng)前瀏覽器的支持．所以完全可以通過JavaScfipt動(dòng)態(tài)地設(shè)置表單元素的事件處理程序。
六、創(chuàng)建單選按鈕
最好的總是留在最后。通過JavaScript動(dòng)態(tài)地創(chuàng)建單選鈕是很費(fèi)勁的，因?yàn)镮E中創(chuàng)建單選鈕的方法與其他瀏覽器所用的方法大相徑庭。
除了IE，當(dāng)前所有其他瀏覽器都允許使用以下方法創(chuàng)建單選鈕(這些方法應(yīng)該能想得到)：
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radlo");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
這樣就能在除IE以外的所有當(dāng)前瀏覽器中創(chuàng)建單選選鈕，而且能正常工作。在lE中，單選鈕確實(shí)會(huì)顯示出來．但是無法將其選中，因?yàn)辄c(diǎn)擊單選鈕行不按我們預(yù)想得那樣使之選中。在IE中，創(chuàng)建單選鈕的方法與其他瀏覽器所用的方法完全不同，而且根本不兼容。對于前面建立的單選鈕，在IE中可以如下建立：
var radioButton = decument.createElement("<input type='radio'
name='radioButton' value='checked'>");
好在，IE中確實(shí)可以通過JavaScript動(dòng)態(tài)地創(chuàng)建單選鈕，只不過難些，而且與其他瀏覽器不兼容。
如何克服這個(gè)限制呢?答案很簡單，這就是需要某種瀏覽器嗅探(browser-sniffing)機(jī)制，使得在創(chuàng)建單選鈕時(shí)腳本就能知道該使用哪個(gè)方法。幸運(yùn)的是，你不用檢查大量不同的瀏覽器。假設(shè)只使用現(xiàn)代瀏覽器，腳本只需要在IE和其他瀏覽器間進(jìn)行區(qū)分就行了。
IE能識別出名為uniqueID的document對象的專用屬性，名為uniqueID。IE也是惟一能識別這個(gè)屬性的瀏覽器，所以uniqueID很適合用來確定腳本是不是在IE中運(yùn)行。
使用docurnent.uniqueID屬性來確定腳本在哪個(gè)瀏覽器中運(yùn)行時(shí)，可以結(jié)合IE特定的辦法和標(biāo)準(zhǔn)兼容的方法，這就會(huì)得到以下代碼：
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");
}

該文章在 2010/11/25 22:43:33 編輯過