Introduction to the Document Object Model (DOM)
Before you dig into jQuery and XML, let's go over the basics of the concepts that you explore in this tutorial.
Assume that you are working with a very basic HTML document that looks like Listing 1.
Listing 1. A simple HTML document
<!DOCTYPE html> <html> <head> <title>This is the page Title</title> </head> <body class="signed-out"> <div id="header"> <ul id="nav"> <li><a href="/home" class="home">Home</a></li> <li><a href="/about" class="about">About</a></li> <li><a href="/auth" class="auth">Sign In</a></li> </ul> </div> <div id="article"> <h1>A Plain DOM</h1> <h2>An sample <b>HTML</b> document.</h2> <div id="section"></div> </div> </body> </html>
Listing 2. Getting a DOM element by id
getElementById() method is the fastest way to retrieve a
with direct access to that element. As browsers provide no warning for duplicate ids,
and as Microsoft® Internet Explorer® treats the name attribute as an id, avoiding duplicates and watching out for the Internet Explorer collisions is your responsibility. That said, in practice these issues are generally simple to avoid and therefore not a big concern.
A second method of DOM element retrieval to look at is
getElementsByTagName(). This more versatile method is essential for
processing XML because with that format you do not have the luxury of relying on
element id attributes. Look at how
works. To retrieve the contents of the H1 node you might execute the code in Listing 3.
Listing 3. Getting a set of elements by tag name
Note two interesting things here. First,
getElementsByTagName() returns an array (a collection of elements, as
the name implies). Because this example has only a single H1 element, you can retrieve it at index 0. That's almost never a safe assumption to make, though, because the element might not exist and the code above might throw an error. Instead, always check that the element exists before you attempt to access its properties (or methods).
Second, you've likely noticed the
innerHTML property. As the name implies, this property provides access to the contents of an element, which in the case above is just a string. Had the H1 element contained other elements (tags), its value would contain those as well as a part of the string (see Listing 4).
Listing 4. Using innerHTML to retrieve value with HTML elements
In addition to innerHTML, browsers also provide a property for retrieving only the text
contents of an element. However, this property is named
innerText in Internet Explorer and
textContent in other browsers. To use it safely across all browsers
you might do something similar to Listing 5.
Listing 5. Using
textContentproperties across different browsers
headerText variable gets the value of
textContent if it exists, and the value of
innerText otherwise. A more sensible way to treat this task is to create a cross-browser function that does that, but as you see later, jQuery already provides one.
The HTML page also has a Sign In link. Suppose that the user has logged in using a
separate process, and you want to reflect that in the navigation by changing the Sign
In label to Sign Out. In the previous example, you retrieved the text value of the node using
Listing 6. Updating the innerHTML value of a DOM node
In addition to updating the values of existing nodes, you can create completely new DOM elements and append them to the DOM using an existing element (see Listing 7).
Listing 7. Creating and injecting a new DOM node
getElementsByTagName() are often executed on the document object, you
can also (more efficiently, in fact) execute them on any other element and reduce the
retrieval scope to the current element's children. This approach obviously assumes
that elements you are accessing are children of the element that the methods are
called on. Keep this notion of context in mind as it comes up later when you look at processing XML with jQuery.
Removing elements from the DOM is also trivial. To remove a node, first retrieve it,
then remove it by referencing it through its parent (see Listing
8). (See more on
parentNode and related properties below.)
Listing 8. Removing an element from the DOM
Last, let's go over attribute assigning and removing, using
getAttribute() (see Listing 9).
Listing 9. Setting and removing an element attribute
parentNode in the previous listing. Given an element, you can navigate from it to surrounding elements within the DOM using these basic references (see Listing 10).
firstChild lastChild nextSibling parentNode previousSibling
See Resources for a link to a complete node property listing.
A DOM representation of these elements, in reference to a given <node>, looks like Listing 11.
Listing 11. Relationship of related DOM elements
<parent_node> <previous_sibling/> <node> <first_child/> ... <last_child/> </node> <next_sibling/> </parent_node>
Last, consider the tree representation of this relationship as shown in Figure 1. First is the parentNode, which includes the node plus its previousSibling and nextSibling elements. The node can contain one or more child nodes (with firstChild and lastChild elements)
Figure 1. Tree representation of adjacent nodes
By now, you should have a good understanding of the basics of DOM traversal and manipulation as they apply to HTML documents. In the next section, you'll look at how this applies to XML documents.