JavaScript DOM 學(xué)習(xí)第七章 表單的擴(kuò)展
更新時(shí)間：2010年02月19日 13:49:33 作者：
這一章我會(huì)處理一個(gè)簡(jiǎn)單的W3C DOM腳本。他會(huì)幫助我們從一個(gè)新的角度來看待交互設(shè)計(jì)。
想法
假設(shè)你有一個(gè)在線的CD評(píng)級(jí)工具。你希望用戶查看他們喜歡的所有CD。但是你怎么知道用戶平均會(huì)查看多少張呢？你在這個(gè)頁面上需要添加多少字段呢？
在W3CDOM出現(xiàn)之前這確實(shí)是一個(gè)問題。假設(shè)你放置了7張CD。但是用戶很可能只想查看一張，太多可能會(huì)嚇著用戶，而有些用戶想查看自己的所有CD，這樣就不得不反復(fù)提交很多次。這確實(shí)很煩人。
只有使用W3C DOM才能讓用戶決定生成多少個(gè)字段。這個(gè)效果和之前的大不相同。
例子
當(dāng)你點(diǎn)擊發(fā)送的時(shí)候，表單就會(huì)把得到的所有參數(shù)以數(shù)組的形式發(fā)送。這用來檢查是否真正的發(fā)送到了服務(wù)器端。不幸的是，mac版的IE和Safari不能發(fā)送。
IE的問題
windows下的IE有兩個(gè)嚴(yán)重的問題：
第一個(gè)問題是所有生成的單選框都同屬于一個(gè)數(shù)組，即使他們的names不同。這樣用戶就只能在所有的單選框里面選擇一個(gè)。也就是說你不能在生成的表單里面實(shí)用單選框。
有讀者說通過innerHTML生成的單選框沒有問題。如果你非要實(shí)用單選框的話，你可以試試。
第二個(gè)問題是生成的表單通過傳統(tǒng)的document.forms無法訪問：IE沒有在數(shù)組里面包含他們。這個(gè)可以通過給他們?cè)O(shè)置ID來解決。
解釋
表單的HTML代碼：
<div id="readroot" style="display: none">
<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<input name="cd" value="title" />
<select name="rankingsel">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
<option value="poor">Poor</option>
<option value="bad">Bad</option>
</select><br /><br />
<textarea rows="5" cols="20" name="review">Short review</textarea>
<br />Radio buttons included to test them in Explorer:<br />
<input type="radio" name="something" value="test1" />Test 1<br />
<input type="radio" name="something" value="test2" />Test 2
</div>
<form method="post" action="/cgi-bin/show_params.cgi">
<span id="writeroot"></span>
<input type="button" id="moreFields" value="Give me more fields!" />
<input type="submit" value="Send form" />
</form>
真正的表單項(xiàng)目在ID為readroot的DIV并且display值為none。這個(gè)DIV是一個(gè)模板，用戶不能修改。當(dāng)用戶需要更多的表單的時(shí)候我們就復(fù)制這個(gè)模板然后添加在表單之后。我們?cè)谝婚_始的就加載，這樣當(dāng)用戶打開頁面的時(shí)候就能看到。
這個(gè)DIV在表單之外，所以當(dāng)用戶提交表單的時(shí)候，這個(gè)模板的內(nèi)容不會(huì)被提交。
ID為writeroot的SPAN是一個(gè)標(biāo)記。新的生成的表單就插入在他的前面。
添加表單項(xiàng)目
下面的代碼可以再需要的時(shí)候用來添加表單項(xiàng)目：
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields;
首先我們需要一個(gè)計(jì)數(shù)器counter，因?yàn)樗械谋韱雾?xiàng)都應(yīng)該有唯一的一個(gè)名字。我們把計(jì)數(shù)器的值添加在生成name后面。初始化計(jì)數(shù)器：
然后是實(shí)際的函數(shù)。我們給計(jì)數(shù)器加1：
function moreFields() {
counter++;
然后復(fù)制我們的模板，移除ID，并且把display設(shè)置為block。readroot應(yīng)該是整個(gè)文檔里面唯一的ID，復(fù)制模板后應(yīng)該顯示出來讓用戶看到。
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
我們遍歷這個(gè)拷貝的子元素：
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
如果子元素有name屬性，那么我們就在name值上加上計(jì)數(shù)器的值，以保證他的唯一性：
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
現(xiàn)在這個(gè)拷貝已經(jīng)準(zhǔn)備好插入了。我們把他插入到writeroot之前：
然后我們?cè)陧撁婕虞d的時(shí)候就執(zhí)行一次，這樣用戶進(jìn)入的時(shí)候就能看到：
移除表單項(xiàng)
每一個(gè)模板的拷貝都有一個(gè)移除按鈕:
點(diǎn)擊這個(gè)按鈕就會(huì)從移除他的父元素（DIV）。整個(gè)生成的表單就都會(huì)消失，并且不會(huì)再出現(xiàn)。
翻譯地址：http://www.quirksmode.org/dom/domform.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)
假設(shè)你有一個(gè)在線的CD評(píng)級(jí)工具。你希望用戶查看他們喜歡的所有CD。但是你怎么知道用戶平均會(huì)查看多少張呢？你在這個(gè)頁面上需要添加多少字段呢？
在W3CDOM出現(xiàn)之前這確實(shí)是一個(gè)問題。假設(shè)你放置了7張CD。但是用戶很可能只想查看一張，太多可能會(huì)嚇著用戶，而有些用戶想查看自己的所有CD，這樣就不得不反復(fù)提交很多次。這確實(shí)很煩人。
只有使用W3C DOM才能讓用戶決定生成多少個(gè)字段。這個(gè)效果和之前的大不相同。
例子
當(dāng)你點(diǎn)擊發(fā)送的時(shí)候，表單就會(huì)把得到的所有參數(shù)以數(shù)組的形式發(fā)送。這用來檢查是否真正的發(fā)送到了服務(wù)器端。不幸的是，mac版的IE和Safari不能發(fā)送。
IE的問題
windows下的IE有兩個(gè)嚴(yán)重的問題：
第一個(gè)問題是所有生成的單選框都同屬于一個(gè)數(shù)組，即使他們的names不同。這樣用戶就只能在所有的單選框里面選擇一個(gè)。也就是說你不能在生成的表單里面實(shí)用單選框。
有讀者說通過innerHTML生成的單選框沒有問題。如果你非要實(shí)用單選框的話，你可以試試。
第二個(gè)問題是生成的表單通過傳統(tǒng)的document.forms無法訪問：IE沒有在數(shù)組里面包含他們。這個(gè)可以通過給他們?cè)O(shè)置ID來解決。
解釋
表單的HTML代碼：
復(fù)制代碼 代碼如下:
<div id="readroot" style="display: none">
<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<input name="cd" value="title" />
<select name="rankingsel">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
<option value="poor">Poor</option>
<option value="bad">Bad</option>
</select><br /><br />
<textarea rows="5" cols="20" name="review">Short review</textarea>
<br />Radio buttons included to test them in Explorer:<br />
<input type="radio" name="something" value="test1" />Test 1<br />
<input type="radio" name="something" value="test2" />Test 2
</div>
<form method="post" action="/cgi-bin/show_params.cgi">
<span id="writeroot"></span>
<input type="button" id="moreFields" value="Give me more fields!" />
<input type="submit" value="Send form" />
</form>
真正的表單項(xiàng)目在ID為readroot的DIV并且display值為none。這個(gè)DIV是一個(gè)模板，用戶不能修改。當(dāng)用戶需要更多的表單的時(shí)候我們就復(fù)制這個(gè)模板然后添加在表單之后。我們?cè)谝婚_始的就加載，這樣當(dāng)用戶打開頁面的時(shí)候就能看到。
這個(gè)DIV在表單之外，所以當(dāng)用戶提交表單的時(shí)候，這個(gè)模板的內(nèi)容不會(huì)被提交。
ID為writeroot的SPAN是一個(gè)標(biāo)記。新的生成的表單就插入在他的前面。
添加表單項(xiàng)目
下面的代碼可以再需要的時(shí)候用來添加表單項(xiàng)目：
復(fù)制代碼 代碼如下:
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields;
首先我們需要一個(gè)計(jì)數(shù)器counter，因?yàn)樗械谋韱雾?xiàng)都應(yīng)該有唯一的一個(gè)名字。我們把計(jì)數(shù)器的值添加在生成name后面。初始化計(jì)數(shù)器：
復(fù)制代碼 代碼如下:
var counter = 0;
然后是實(shí)際的函數(shù)。我們給計(jì)數(shù)器加1：
復(fù)制代碼 代碼如下:
function moreFields() {
counter++;
然后復(fù)制我們的模板，移除ID，并且把display設(shè)置為block。readroot應(yīng)該是整個(gè)文檔里面唯一的ID，復(fù)制模板后應(yīng)該顯示出來讓用戶看到。
復(fù)制代碼 代碼如下:
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
我們遍歷這個(gè)拷貝的子元素：
復(fù)制代碼 代碼如下:
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
如果子元素有name屬性，那么我們就在name值上加上計(jì)數(shù)器的值，以保證他的唯一性：
復(fù)制代碼 代碼如下:
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
現(xiàn)在這個(gè)拷貝已經(jīng)準(zhǔn)備好插入了。我們把他插入到writeroot之前：
復(fù)制代碼 代碼如下:
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
insertHere.parentNode.insertBefore(newFields,insertHere);
}
然后我們?cè)陧撁婕虞d的時(shí)候就執(zhí)行一次，這樣用戶進(jìn)入的時(shí)候就能看到：
復(fù)制代碼 代碼如下:
window.onload = moreFields;
移除表單項(xiàng)
每一個(gè)模板的拷貝都有一個(gè)移除按鈕:
復(fù)制代碼 代碼如下:
<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
點(diǎn)擊這個(gè)按鈕就會(huì)從移除他的父元素（DIV）。整個(gè)生成的表單就都會(huì)消失，并且不會(huì)再出現(xiàn)。
翻譯地址：http://www.quirksmode.org/dom/domform.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)
您可能感興趣的文章:
- IE在DOM操作有表單控件時(shí)的bug
- JavaScript DOM 學(xué)習(xí)第五章 表單簡(jiǎn)介
- JavaScript DOM學(xué)習(xí)第六章 表單實(shí)例
- JavaScript DOM學(xué)習(xí)第八章 表單錯(cuò)誤提示
- JQuery動(dòng)態(tài)創(chuàng)建DOM、表單元素的實(shí)現(xiàn)代碼
- 使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對(duì)象
- jquery中dom操作和事件的實(shí)例學(xué)習(xí)-表單驗(yàn)證
- DOM基礎(chǔ)教程之使用DOM控制表單
相關(guān)文章
這篇文章主要介紹了參數(shù)傳遞的四種形式（URL,超鏈接,js,form表單）有需要的朋友可以參考下2015-07-07
關(guān)于JavaScript的變量的數(shù)據(jù)類型的判斷方法
這篇文章主要介紹了關(guān)于JavaScript的變量的數(shù)據(jù)類型的判斷方法,JS是一種弱類型語言,其數(shù)據(jù)類型的相關(guān)特性有時(shí)也受到不少開發(fā)者的詬病,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了如何編寫高質(zhì)量JS代碼的方法及相關(guān)資料,需要的朋友可以參考下
2014-12-12 
在邏輯運(yùn)算符中，提到與和或，我們可能立刻想到的是&&、||，在php中還有and、or.然而and和or中有一個(gè)小小的坑,今天我們就來探討下php中and 和 &&
2018-07-07 
這篇文章主要介紹了javascript函數(shù)寫法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03 
雙擊事件(dblclick)會(huì)返回一次單擊事件(click)結(jié)果和一次雙擊事件(dblclick) 結(jié)果，下面有個(gè)不錯(cuò)的示例，大家可以感受下
2013-11-11 
這篇文章主要介紹了JavaScript中的getTime()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-06-06 
javascript設(shè)計(jì)模式之工廠模式示例講解
這篇文章主要介紹了javascript設(shè)計(jì)模式中的工廠模式示例講解,需要的朋友可以參考下
2014-03-03 
THREE.JS入門教程(4)創(chuàng)建粒子系統(tǒng)
Three.js是一個(gè)偉大的開源WebGL庫，WebGL允許JavaScript操作GPU，在瀏覽器端實(shí)現(xiàn)真正意義的3D本文將介紹創(chuàng)建一個(gè)粒子系統(tǒng)/風(fēng)格/引入物理等等，感興趣的朋友可以了解下哦，希望本文對(duì)你有所幫助
2013-01-01