Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 7 ■ JavaScript and User Interaction: Navigation and Forms
Each element inside the collection has several properties; which ones are supported is dependent on the type
of the element. I’ll now list all the properties and list the elements that support this property in parentheses. We’ll go
through the different elements in detail later on in this chapter:
• checked: Boolean indicating whether or not the element was selected (buttons, check boxes,
radio buttons)
• defaultChecked: Boolean indicating whether or not the element was initially selected
(check boxes, radio buttons)
• value: The value of the element as defined in the value attribute (all elements except
select boxes)
• defaultValue: The initial value of the element (text boxes, text areas)
• form: The form the element resides in (read only—all elements)
• name: Name of the element (all elements)
• type: The type of the element (read only—all elements)
One special element type is the select box, which comes with a collection of its own, a property called
options—but more on this later. Each element has a range of methods that is also dependent on the type of element.
None of these methods expect any parameters.
• blur(): Takes the focus of the user agent away from the element (all elements)
• focus(): Puts the focus of the user agent on the element (all elements)
• click(): Simulates the user clicking the element (buttons, check boxes, file upload fields,
Reset and Submit buttons)
• select(): Selects and highlights the text content of the element (password fields, text fields,
and text areas)
■ ■Note Notice that click() seems at first a bit odd, but it can be really helpful if you work on web applications,
and the middle tier of your development environment does things to the submitting process of forms like Java Spring
and .NET do. This is not a JS beginner’s environment, though, so it falls outside the scope of this book.
HTML Attributes Not Contained in the Elements Collection
In addition to using the properties of the elements collection, you can read and set (browser settings permitting,
of course) the attributes of the element in question once you reach it via the forms and elements collections.
For example, you could change the size of a text field by changing its cols and rows attributes:
var myTextBox = document.forms[0].elements[2];
if (myTextBox.type == 'textarea'){
myTextBox.rows = 10;
myTextBox.cols = 30;
}
228
www.it-ebooks.info