Scripting in the Browser - Part 1 | Page 2
Scripting in the Browser
Understanding Key DOM Interfaces
The W3C XML DOM includes three levels. Level 1 focuses on XML and HTML documents. Level 2 adds stylesheet support to DOM Level 1 and provides mechanisms for applications to manipulate style information programmatically. Level 2 also supports XML namespaces and defines an event model. Level 3 builds on Level 2 to specify Document Type Definitions (DTDs) and schemas. Mozilla supports DOM Level 2 and parts of DOM Level 3, while IE 6 supports DOM Level 1.Both provide additional areas of support outside of the DOM.
The DOM Level 1 Core includes the following interfaces:
In the next section, I'll work through the following interfaces:
Understanding the Document Interface
The Document interface represents the entire document and is the parent for the rest of the object model. The document object hosts the Document interface. This interface is the root of the document tree.
The interface also contains a number of factory methods that create new objects. You can use these methods to add new elements, text nodes, and attributes using code. Factory methods create content within the Document interface.
The Document interface includes the following members:
You can find out more about the Document interface at http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#i-Document.
documentElement attribute provides direct access to the root element of the XML
In an XHTML document, this is the
<html> element. The
documentElement references an
Element object, which is a type of
createElement() method is a factory method used to create an
Element. It requires a tag name. The method creates an element with the specified tag name:
When this method creates a new element, it doesn't have any position in the document tree. You still need to add it, usually using the
The preceding code creates a
<DVD> element and appends it to the root element of the document. Note that the code refers to the document oDocument when it uses the
There are a number of similar create methods, including
createTextNode() factory method creates text nodes containing the passed-in value. This is equivalent to adding text inside an element or attribute, because a text node is the child. You can use the method in the following way:
This code creates the following element:
You can use the
createAttribute() factory method to create
Attr (attribute) objects. The value of an attribute appears within a text node inside that attribute, so you can use a similar approach to the one used to add a value to an
Element. You can also use the value property to set the value of the text node in the attribute:
This code sample creates an attribute with the value 4. The code then inserts it into the attributes collection of an element by calling the
setNamedItem() method on a
NamedNodeMap. You'll learn a little more about the
These other factory methods create the remaining node types:
|createCDATASection() createComment() createDocumentFragment() createEntityReference() createProcessingInstruction()|
You can find these methods detailed in the DOM Level 1 reference at http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html.
getElementsByTagName() method returns all matching elements as a
NodeList. The method requires a string, which is the name of tags to identify. Note that the method doesn't return attributes with the specified name:
This line returns a collection of elements called
<title>. Note that in XML, the tag name is case-sensitive.