|
|
Free Open Book
Sams Teach Yourself JavaScript in 24 Hours |
|
Understanding DOM StructureIn Hour 4, "Working with the Document Object Model (DOM)," you learned about how some of the most important DOM objects are organized: The window object contains the document object, and so on. Although these objects were the only ones available in older browsers, the new DOM adds objects under the document object for every element of a page. To better understand this concept, let's look at the simple HTML document in Listing 13.1. This document has the usual <head> and <body> sections, a heading, and a single paragraph of text. Listing 13.1. A Simple HTML Document
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 tree-like structure, with the document object itself at the root of the tree, and individual elements such as the heading and paragraph of text at the leaves of the tree. Figure 13.1 shows a diagram of these relationships. Figure 13.1. How the DOM represents an HTML document.
In the following sections, you will examine the structure of the DOM more closely. By the Way Don't worry if this tree structure confuses you; you can do almost anything by simply assigning IDs to elements and referring to them. This is the method used in earlier hours of this book, as well as in the Try It Yourself section of this hour. In Hour 14, "Using Advanced DOM Features," you will look at more complicated examples that require you to understand the way objects are organized in the DOM. NodesEach container or element in the document is called a node in the DOM. In the example in Figure 13.1, 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. Parents and ChildrenAs you learned earlier in this book, each JavaScript object can have a parentan object that contains itand can also have childrenobjects that it contains. The DOM uses the same terminology. In Figure 13.1, the document object is the parent object for the remaining objects, and does not have a parent itself. 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. Similarly, the text within the <h1> tags is a child of the h1 object. By the Way In Hour 14, you will learn methods of referring to objects by their parent and child relationships, as well as ways of adding and removing nodes from the document. SiblingsThe DOM also uses another term for organization of objects: siblings. As you might expect, this refers to objects that have the same parentin other words, objects at the same level in the DOM object tree. In Figure 13.1, the h1 and p objects are siblings: Both are children of the body object. Similarly, the head and body objects are siblings under the html object.
|
Main Menu |
| 500 Juegos Gratis | 500 Giochi Gratis | 500 Jeux Gratuits | 500 Jogos Gratis | 500 Kostenlose Spiele |
