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.