- Refresher on the Different Types of Scripting
- Displaying Random Content on the Client Side
- Understanding the Document Object Model
- Using window Objects
- Working with the document Object
- Accessing Browser History
- Working with the location Object
- More About the DOM Structure
- Working with DOM Nodes
- Creating Positionable Elements (Layers)
- Hiding and Showing Objects
- Modifying Text Within a Page
- Adding Text to a Page
- Changing Images Based on User Interaction
- Thinking Ahead to Developing HTML5 Applications
- Summary
- Q & A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
More About the DOM Structure
Previously in this chapter, you learned how some of the most important DOM objects are organized: The window object is a parent to the document object, and so on. Whereas these objects were the only ones available in the original conception of the DOM years ago, the modern DOM adds objects under the document object for every element of a page.
To better understand the concept of a document object for every element, let’s look at the simple HTML document in Listing 6.4. This document has the usual <head> and <body> sections, plus a heading and a single paragraph of text.
LISTING 6.4 A Simple HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Simple HTML Document</title>
</head>
<body>
<h1>This is a Level-1 Heading.</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Like all HTML documents, this one is composed of various containers and their contents. The <html> tags form a container that includes the entire document, the <body> tags contain the body of the page, and so on.
In the DOM, each container within the page and its contents are represented by an object. The objects are organized into a treelike structure, with the document object itself at the root of the tree, and with individual elements such as the heading and paragraph of text at the leaves of the tree. Figure 6.5 shows a diagram of these relationships.
In the following sections, you will examine the structure of the DOM more closely.
)
FIGURE 6.5 How the DOM represents an HTML document.
Nodes
Each container or element in a document is called a node in the DOM. In the example in Figure 6.5, each of the objects in boxes is a node, and the lines represent the relationships between the nodes.
You will often need to refer to individual nodes in scripts. You can do this by assigning an ID, or by navigating the tree using the relationships between the nodes. You will get plenty of practice with nodes as you move forward in this book; it’s a good word to know.
Parents and Children
As you have already learned, an object can have a parent (an object that contains it) and can also have children (objects that it contains). The DOM uses the same terminology as JavaScript in this regard.
In Figure 6.5, the document object is the parent object for the other objects shown and does not have a parent itself explicitly listed, although as you learned previously, the document object is a child of the window object. The html object is the parent of the head and body objects, and the h1 and p objects are children of the body object.
Text nodes work a bit differently. The actual text in the paragraph is a node in itself and is a child of the p object, rather than being a grandchild of the body object. Similarly, the text within the <h1> tags is a child of the h1 object. Don’t worry, we’ll refer to this concept further on in the book to reinforce understanding.
Siblings
The DOM also uses another term for the organization of objects: siblings. As you might expect, this refers to objects that have the same parent—in other words, objects at the same level in the DOM object tree.
In Figure 6.5, the h1 and p objects are siblings because both are children of the body object. Similarly, the head and body objects are siblings under the html object. There’s not a lot of practical use in knowing which objects are siblings, but it is offered here as some knowledge that completes the family tree.