选取表单和表单元素

：点上面关注免费学习前端知识！

---

表单和它们所包含的元素可以用如getElementById()和getElementsByTagName()等标准的方法从文档中来选取：

var fields=document.getElementById("address").getElementsByTagName("input");

在支持querySelectorAll()的浏览器中，从一个表单中选取所有的单选按钮或所有同名的元素的代码如下：

//id为"shipping"的表单中所有的单选按钮

document.querySelectorAll('#shipping input[type="radio"]');

//id为"shipping"的表单中所有

名字为"method"的单选按钮

document.querySelectorAll('#shipping input[type="radio"][name="method"]');

有name或id属性的＜form＞元素能够通过很多方法来选取。name="address"属性的＜form＞可以用以下任何方法来选取：

window.address//不可靠：不要使用

document.address//仅当表单有name属性时可用

document.forms.address//显式访问有name或id的表单

document.forms[n]//不可靠：n是表单的序号

document.forms是一个HTMLCollection对象，可以通过数字序号或id或name来选取表单元素。Form对象本身的行为类似于多个表单元素组成的HTMLCollection集合，也可以通过name或数字序号来索引。如果名为"address"的表单的第一个元素的name是"street"，可以使用以下任何一种表达式来引用该元素：

document.forms.address[0]

document.forms.address.street

document.address.street

//当有name="address"，而不是只有id="address"

如果要明确地选取一个表单元素，可以索引表单对象的elements属性：

document.forms.address.elements[0]

document.forms.address.elements.street

一般来说指定文档元素的方法用id属性要比name属性更佳。但是，name属性在HTML表单提交中有特殊的目的，它在表单中较为常用，在其他元素较少使用。它应用于相关的复选按钮组和强制共享name属性值的、互斥的单选按钮组。请记住，当用name来索引一个HTMLCollection对象并且它包含多个元素来共享name时，返回值是一个类数组对象，它包含所有匹配的元素。考虑以下表单，它包含多个单选按钮来选择运输方式：

＜form name="shipping"＞

＜fieldset＞＜legend＞Shipping Method＜/legend＞

＜label＞＜input type="radio"name="method"value="1st"＞First-class＜/label＞

＜label＞＜input type="radio"name="method"value="2day"＞2-day Air＜/label＞

＜label＞＜input type="radio"name="method"value="overnite"＞Overnight＜/label＞

＜/fieldset＞

＜/form＞

对于该表单，用如下代码来引用单选按钮元素数组：

var methods=document.forms.shipping.elements.method;

注意，＜form＞元素本身有一个HTML属性和对应的JavaScript属性叫"method"，所以在此案例中，必须要用该表单的elements属性而非直接访问method属性。为了判定用户选取哪种运输方式，需要遍历数组中的表单元素并检测它们的checked属性：

var shipping_method;

for(var i=0;i＜methods.length;i++)

if(methods[i].checked)shipping_method=methods[i].value;

完

看前端技术文字，就在Web前端精髓