Section 4.11. A new type of tree: the DOM tree

4.11. A new type of tree: the DOM tree

Once the browser has your markup with the <html> element at the top, it creates a new object for each node in the tree. The result is a bunch of objects, all "connected" together, like you see here:

We've ditched the tree image... we figure you've got the idea by now.

 head title "Binary Tree Selection"                                   p                     Below are two binary tree options:"                div         "Our "       em                  " trees are great for folks that are far away."                    "depth-first" These are text node objects.

Although this doesn't look much like a tree anymore, you can still see the root, branches, and leaves, just like on page 225.

This entire thing is usually called a DOM tree, because it represents your document using objects and provides a tree model of your markup.

 <html> is the root element of the DOM tree. html      body All of these objects   are element nodes, because they represent HTML elements.                   div        em                 "Our "     " trees are a favorite for nearby neighbors."                         "breadth-first" Order   is still preserved, as elements and text appear in exactly the same order as they do in the HTML markup.                                         p "You can view other products in the "          a                "."                                           "Main Menu"

Work It Through

Time to get your dry-erase markers out and dive into the DOM for yourself. Your job is to take the HTML below and draw the DOM tree that a web browser would create to represent this markup.

     <html>     <head>     <title>Gonna Get Me Some Blues</title></head>     <body>     <p>Do you have the blues? If not, check out Stefan       Grossman's <a href="http://www.guitarvideos.com">       Guitar Workshop</a> for some great DVDs and       instructional videos.</p>     </body>     </html>

Draw what you think the DOM tree willlook like here:

   html      head

Start out by drawing boxes, with the element names and text inside. Then, connect your boxes together, like this.^[*]

^[*] One of our reviewers pointed out that you don't have to draw the boxes before writing in the element names. After long hours of thought, we concur.