Whereas
DOM manipulation gives you some fine-grained control over inserting new elements, often
a combination of techniques results in the best solution. Suffice it to say, you??™ll see more of
innerHTML going forward.
Attaching Properties and Methods to Existing DOM Elements
Objects returned from the DOM behave just like any other JavaScript objects. This can be a
handy way to store additional properties at the element level instead of in another abstracted
function or object.
For example, imagine a form field that requires validation (okay, that probably wasn??™t very
hard to imagine). You could store validation parameters at the element level.
Use the following HTML:
You can then use the following JavaScript:
CHAPTER 2 n HTML, CSS, AND JAVASCRIPT 35
var passcode = document.getElementById("passcode");
passcode.regexp = /^[0-9]+$/;
document.getElementById("frm").onsubmit = function(){
var passcode = document.getElementById("passcode");
if(!passcode.regexp.test(passcode.value))
{
alert('Not a valid passcode');
return false;
}
}
In this purely fictitious example, you grab the passcode element and assign a regular
expression to it. Then you attach an event handler for submitting the form that can verify the
contents of the field before submitting the form. If users have entered an invalid passcode,
they are told, and the form is stopped from processing by returning false.
Pages:
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84