javascript

The Element Type
Chapter 10: The Document Object Model
Next to the Document type, the Element type is most often used in web programming. The Element
type represents an XML or HTML element, providing access to information such as its tag name,
children, and attributes. An Element node has the following characteristics:
❑
❑
❑
❑
❑
nodeType is 1.
nodeName is the element ’ s tag name.
nodeValue is null .
parentNode may be a Document or Element .
Child nodes may be Element , Text , Comment , ProcessingInstruction , CDATASection , or
EntityReference .
An element ’ s tag name is accessed via the nodeName property or by using the tagName property; both
properties return the same value (the latter is typically used for clarity). Consider the following element:
< div id=”myDiv” > < /div >
This element can be retrieved and its tag name accessed in the following way:
var div = document.getElementById(“myDiv”);
alert(div.tagName); //”DIV”
alert(div.tagName == div.nodeName); //true
The element in question has a tag name of div and an ID of “ myDiv ” . Note, however, that div.tagName
actually outputs “ DIV ” instead of “ div ” . When used with HTML, the tag name is always represented in
all uppercase; when used with XML (including XHTML), the tag name always matches the case of the
source code. If you aren ’ t sure whether your script will be on an HTML or XML document, it ’ s best to
convert tag names to a common case before comparison, as this example shows:
if (element.tagName == “div”){ //AVOID! Error prone!
//do something here
}
if (element.tagName.toLowerCase() == “div”){ //Preferred - works in all documents
//do something here
}
This example shows two comparisons against a tagName property. The first is quite error - prone because
it won ’ t work in HTML documents. The second approach, converting the tag name to all lowercase, is
preferred because it will work for both HTML and XML documents.
The Element type constructor and prototype are accessible in script in all browsers, including
IE as of version 8.
279