JavaScript DOM 学习第七章 表单的扩展
更新时间：2010年02月19日 13:49:33 作者：
这一章我会处理一个简单的W3C DOM脚本。他会帮助我们从一个新的角度来看待交互设计。
想法
假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢？你在这个页面上需要添加多少字段呢？
在W3CDOM出现之前这确实是一个问题。假设你放置了7张CD。但是用户很可能只想查看一张，太多可能会吓着用户，而有些用户想查看自己的所有CD，这样就不得不反复提交很多次。这确实很烦人。
只有使用W3C DOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。
例子
当你点击发送的时候，表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是，mac版的IE和Safari不能发送。
IE的问题
windows下的IE有两个严重的问题：
第一个问题是所有生成的单选框都同属于一个数组，即使他们的names不同。这样用户就只能在所有的单选框里面选择一个。也就是说你不能在生成的表单里面实用单选框。
有读者说通过innerHTML生成的单选框没有问题。如果你非要实用单选框的话，你可以试试。
第二个问题是生成的表单通过传统的document.forms无法访问：IE没有在数组里面包含他们。这个可以通过给他们设置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>
真正的表单项目在ID为readroot的DIV并且display值为none。这个DIV是一个模板，用户不能修改。当用户需要更多的表单的时候我们就复制这个模板然后添加在表单之后。我们在一开始的就加载，这样当用户打开页面的时候就能看到。
这个DIV在表单之外，所以当用户提交表单的时候，这个模板的内容不会被提交。
ID为writeroot的SPAN是一个标记。新的生成的表单就插入在他的前面。
添加表单项目
下面的代码可以再需要的时候用来添加表单项目：
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;
首先我们需要一个计数器counter，因为所有的表单项都应该有唯一的一个名字。我们把计数器的值添加在生成name后面。初始化计数器：
然后是实际的函数。我们给计数器加1：
function moreFields() {
counter++;
然后复制我们的模板，移除ID，并且把display设置为block。readroot应该是整个文档里面唯一的ID，复制模板后应该显示出来让用户看到。
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++) {
如果子元素有name属性，那么我们就在name值上加上计数器的值，以保证他的唯一性：
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
现在这个拷贝已经准备好插入了。我们把他插入到writeroot之前：
然后我们在页面加载的时候就执行一次，这样用户进入的时候就能看到：
移除表单项
每一个模板的拷贝都有一个移除按钮:
点击这个按钮就会从移除他的父元素（DIV）。整个生成的表单就都会消失，并且不会再出现。
翻译地址：http://www.quirksmode.org/dom/domform.html
转载请保留以下信息
作者：北玉(tw:@rehawk)
假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢？你在这个页面上需要添加多少字段呢？
在W3CDOM出现之前这确实是一个问题。假设你放置了7张CD。但是用户很可能只想查看一张，太多可能会吓着用户，而有些用户想查看自己的所有CD，这样就不得不反复提交很多次。这确实很烦人。
只有使用W3C DOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。
例子
当你点击发送的时候，表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是，mac版的IE和Safari不能发送。
IE的问题
windows下的IE有两个严重的问题：
第一个问题是所有生成的单选框都同属于一个数组，即使他们的names不同。这样用户就只能在所有的单选框里面选择一个。也就是说你不能在生成的表单里面实用单选框。
有读者说通过innerHTML生成的单选框没有问题。如果你非要实用单选框的话，你可以试试。
第二个问题是生成的表单通过传统的document.forms无法访问：IE没有在数组里面包含他们。这个可以通过给他们设置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>
真正的表单项目在ID为readroot的DIV并且display值为none。这个DIV是一个模板，用户不能修改。当用户需要更多的表单的时候我们就复制这个模板然后添加在表单之后。我们在一开始的就加载，这样当用户打开页面的时候就能看到。
这个DIV在表单之外，所以当用户提交表单的时候，这个模板的内容不会被提交。
ID为writeroot的SPAN是一个标记。新的生成的表单就插入在他的前面。
添加表单项目
下面的代码可以再需要的时候用来添加表单项目：
复制代码 代码如下:
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;
首先我们需要一个计数器counter，因为所有的表单项都应该有唯一的一个名字。我们把计数器的值添加在生成name后面。初始化计数器：
复制代码 代码如下:
var counter = 0;
然后是实际的函数。我们给计数器加1：
复制代码 代码如下:
function moreFields() {
counter++;
然后复制我们的模板，移除ID，并且把display设置为block。readroot应该是整个文档里面唯一的ID，复制模板后应该显示出来让用户看到。
复制代码 代码如下:
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++) {
如果子元素有name属性，那么我们就在name值上加上计数器的值，以保证他的唯一性：
复制代码 代码如下:
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
现在这个拷贝已经准备好插入了。我们把他插入到writeroot之前：
复制代码 代码如下:
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
insertHere.parentNode.insertBefore(newFields,insertHere);
}
然后我们在页面加载的时候就执行一次，这样用户进入的时候就能看到：
复制代码 代码如下:
window.onload = moreFields;
移除表单项
每一个模板的拷贝都有一个移除按钮:
复制代码 代码如下:
<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
点击这个按钮就会从移除他的父元素（DIV）。整个生成的表单就都会消失，并且不会再出现。
翻译地址：http://www.quirksmode.org/dom/domform.html
转载请保留以下信息
作者：北玉(tw:@rehawk)
相关文章
这篇文章主要介绍了参数传递的四种形式（URL,超链接,js,form表单）有需要的朋友可以参考下2015-07-07
这篇文章主要介绍了关于JavaScript的变量的数据类型的判断方法,JS是一种弱类型语言,其数据类型的相关特性有时也受到不少开发者的诟病,需要的朋友可以参考下2015-08-08
JavaScript字符串对象slice方法入门实例（用于字符串截取）
这篇文章主要介绍了JavaScript字符串对象slice方法入门实例,slice方法用于通过指定开始和结束位置来截取字符串,需要的朋友可以参考下2014-10-10
这篇文章主要介绍了如何编写高质量JS代码的方法及相关资料,需要的朋友可以参考下2014-12-12
在逻辑运算符中，提到与和或，我们可能立刻想到的是&&、||，在php中还有and、or.然而and和or中有一个小小的坑,今天我们就来探讨下php中and 和 &&2018-07-07
这篇文章主要介绍了javascript函数写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果，下面有个不错的示例，大家可以感受下2013-11-11
这篇文章主要介绍了JavaScript中的getTime()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了javascript设计模式中的工厂模式示例讲解,需要的朋友可以参考下2014-03-03
Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D本文将介绍创建一个粒子系统/风格/引入物理等等，感兴趣的朋友可以了解下哦，希望本文对你有所帮助2013-01-01
最新评论