| |
Identifying Elements
When you write scripts and style sheets, you may want your code to apply to
one particular element, to all elements of the same type, or to a heterogeneous set
of elements that you specify. Element objects have several properties that make
them easy to identify in these various ways. An object's
id and className properties contain the values of the corresponding element's ID and CLASS attributes,
respectively, and its tagName property contains the name of the element's tag. Your
code can use the id property to reference a single element, the
tagName property to reference all elements of the same type, or the
className property to reference any set you define.
Elements that have a NAME attribute also have a
name property that contains the attribute's value. You can use the
name property to identify a single element
or a group of related elements (such as radio buttons) in your code. But the
name property isn't as widely applicable as the
id property, for example, and the object
model includes it mainly for backward compatibility.
Values of the tagName property are stored in all uppercase letters. The
id, name, and className properties are case sensitive. The value
coolstuff, for example, represents a different class than the value
cOOlStuff in a case-sensitive language like JavaScript. Style sheets, however, are associated to elements without regard
to capitalization.
The following table summarizes information about the four properties
that identify elements.
| Attribute |
Property |
Case-Sensitive? |
Applicable Elements |
| (None) |
tagName |
Always uppercase |
All, including comments |
| ID |
id |
Yes |
All, except comments |
| CLASS |
className |
Yes |
All, except comments |
| NAME |
name |
Yes |
Anchor, Applet, Button, Form, IMG, Input, Map, Meta, Object, Select, and TextArea |
Using properties to identify elements, you can write a single script that
performs the same action for all the elements in whatever set you choose. The click
event handler in the following sample code responds differently to mouse clicks on
the element with an id value of f123, on elements in the class
coolstuff, and on H1 elements. In each case, the handler changes the inline style of the element to alter
the element's appearance.
<HTML>
<HEAD>
<TITLE>Identifying Elements</TITLE>
<SCRIPT FOR="document" EVENT="onclick()" LANGUAGE="JavaScript">
// The click event is fired on the document regardless of
// where the user clicks.
// The style property gives access to the inline style.
var curElement = event.srcElement;
if ("F123" == curElement.id.toUpperCase()) {
// Toggle element color between red and blue.
if ("red" == curElement.style.color)
curElement.style.color = "blue";
else
curElement.style.color = "red";
}
if ("COOLSTUFF" == curElement.className.toUpperCase()) {
// Make text bigger or smaller when clicked.
if ("" == curElement.style.fontSize)
curElement.style.fontSize = "150%";
else
curElement.style.fontSize = "";
}
if ("H1" == curElement.tagName) {
// Toggle the header between centered and left-aligned.
if ("center" == curElement.align)
curElement.align = "";
else
curElement.align = "center";
}
</SCRIPT>
</HEAD>
<BODY>
<P ID="f123" STYLE="color:red">
This paragraph has a unique ID.</P>
<H1>Clicking on an H1 element changes its alignment.</H1>
<P>This paragraph contains
<STRONG CLASS="coolstuff">cool stuff.</STRONG>
</P>
<H1 CLASS="coolstuff">
This header is also cool stuff.
</H1>
</BODY>
</HTML>
In the preceding code, the className and
id values are converted to uppercase before making comparisons; these values are thus treated on a
case-insensitive basis. [Содержание]
|
