javascript

Chapter 10: The Document Object Model
HTML Elements
All HTML elements are represented by the HTMLElement type, either directly or through subtyping. The
HTMLElement inherits directly from Element and adds several properties. Each property represents one
of the following standard attributes that are available on every HTML element:
❑
❑
❑
❑
❑
id — A unique identifier for the element in the document.
title — Additional information about the element, typically represented as a tooltip.
lang — The language code for the contents of the element (rarely used).
dir — The direction of the language, “ ltr ” (left - to - right) or “ rtl ” (right - to - left); also rarely
used.
className — The equivalent of the class attribute, which is used to specify CSS classes on an
element. The property could not be named class because class is an ECMAScript reserved
word (see Chapter 1 for information about reserved words).
Each of these properties can be used to both retrieve the corresponding attribute value and to change the
value. Consider the following HTML element:
< div id=”myDiv” class=”bd” title=”Body text” lang=”en” dir=”ltr” > < /div >
All of the information specified by this element may be retrieved using the following JavaScript code:
var div = document.getElementById(“myDiv”);
alert(div.id);
//”myDiv”
alert(div.className); //”bd”
alert(div.title); //”Body text”
alert(div.lang); //”en”
alert(div.dir); //”ltr”
It ’ s also possible to use the following code to change each of the attributes by assigning new values to
the properties:
div.id = “someOtherId”;
div.className = “ft”;
div.title = “Some other text”;
div.lang = “fr”;
div.dir =”rtl”;
Not all of the properties affect changes on the page when overwritten. Changes to id or lang will be
transparent to the user (assuming no CSS styles are based on these values), whereas changes to title
will be apparent only when the mouse is moved over the element. Changes to dir will cause the text on
the page to be aligned either to the left or right as soon as the property is written. Changes to className
may appear immediately if the class has different CSS style information than the previous one.
As mentioned previously, all HTML elements are represented by an instance of HTMLElement or a more
specific subtype. The following table lists each HTML element and its associated type (italicized
elements are deprecated). Note that these types are accessible in Opera, Safari, Chrome, and Firefox via
JavaScript, but not in IE prior to version 8.
280