JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

15.9.1 Selecting Forms and Form Elements

15.9.1 Selecting Forms and Form Elements


Forms and the elements they contain can be selected from a document using standard methods like getElementById() and getElementsByTagName():

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

In browsers that support querySelectorAll(), you might select all radio buttons, or all elements with the same name, from a form with code like this:

// All radio buttons in the form with id "shipping" document.querySelectorAll('#shipping input[type="radio"]'); // All radio buttons with name "method" in form with id "shipping" document.querySelectorAll('#shipping input[type="radio"][name="method"]');

As described in §14.7 , §15.2.2 , and §15.2.3 , however, aelement with a name or id attribute can be selected in a number of other ways. Awith a name="address" attribute can be selected in any of these ways:

window.address // Brittle: do not use document.address // Only works for forms with name attribute document.forms.address // Explicit access to a form with name or id document.forms[n] // Brittle: n is the form's numerical position

§15.2.3 explained that document.forms is an HTMLCollection object that allows form elements to be selected by numerical order, by id, or by name. Form objects themselves act like HTMLCollections of form elements and can be indexed by name or number. If a form with name “address” has a first element with name “street”, you can refer to that form element with any of these expressions:

document.forms.address[0] document.forms.address.street document.address.street // only for name="address", not id="address"

If you want to be explicit about selecting a form element, you can index the elements property of the form object instead:

document.forms.address.elements[0] document.forms.address.elements.street

The id attribute is the generally preferred way to name specific document elements. The name attribute, however, has a special purpose for HTML form submission, and is much more commonly used with forms than with other elements. It is typical for groups of related checkboxes and mandatory for mutually exclusive groups of radioboxes to share a value of the nameattribute. Remember that when you index an HTMLCollection with a name and more than one element shares that name, the returned value is an array-like object that contains all matching elements. Consider this form that contains radio buttons for selecting a shipping method:


Shipping Method

First-class

2-day Air

Overnight



With this form, you might refer to the array of radio button elements like this:

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

Note thatelements have an HTML attribute and corresponding JavaScript property named “method”, so in this case, we must use the elements property of the form instead of directly accessing the method property. In order to determine which shipping method the user has selected, we’d loop through the form elements in the array and check the checked property of each:

var shipping_method;

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

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

We’ll see more about the properties, such as checked and value, of form elements in the next section.

欢迎转载,转载请注明来自一手册:http://yishouce.com/book/1/27978.html
友情链接It题库(ittiku.com)| 版权归yishouce.com所有| 友链等可联系 admin#yishouce.com|粤ICP备16001685号-1