Section 4.12. Podcasting Studio | Head Rush Ajax (Head First)

4.12. Podcasting Studio

HeadRush: We're here with the Document Object Model, talking about how web browsers really see HTML, and what JavaScript programmers need to know to update their pages on the fly. It's good to have you, ummm... Document... ummm, Mr. Model.... well, what exactly should we call you?

Document Object Model: Most folks just call me the DOM. It's an awful lot of trouble to go around saying "Document Object Model."

HeadRush: Oh, that is easier. So, let me get this straight. You're what a web browser sees when it looks at an HTML page?

DOM: Well, the browser starts out with HTML and CSS and JavaScript files. But web browsers really don't like to work with text, which is all that those files are. It's hard to apply CSS styles and JavaScript event handlers to a bunch of text.

HeadRush: Oh, that makes sense. Because hardly anyone puts their CSS into their HTML files anymore... the CSS is usually in a separate file.

DOM: Right, and most of the time, the JavaScript isn't in the same file as the HTML, either. So the browser uses me, and combines all the HTML, CSS, and JavaScript into one structure. So, for each piece of HTML, the browser creates an object. And I keep all those objects organized and connected.

HeadRush: I can see how that would make it easier for the browser to keep up with all those HTML elements. But I'm not sure I understand how CSS and JavaScript fit into this picture.

DOM: Well, all my objects that represent HTML have helpful methods you can call, and properties you can set. So, for example, you could call addEventListener() on a button, and have the button call a JavaScript function every time it's pushed. All that is easy if browsers use meand the objects I provideto model web pages.

HeadRush: OK, I get it. So do you make it easier to change what's on a web page, too?

DOM: You got it. You can add a new text node to an element to make text appear, or remove a <div> element from its parent to make an entire section of a page vanish.

HeadRush: Oh, that is nice. And none of that requires reloading the page?

DOM: Exactly. I exist in memory all on the web browser, so the browser doesn't need to talk to a server or even be connected to the network to use me.

HeadRush: Wow, that's pretty sweet. I'm looking forward to getting to know you better...

Work It Through-Answers

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>

Here's what we drew:

                          html     head                                 body     title                                 p Gonna Get Me Some Blues      Do you have the blues? If not, check out Stefan Grossman's                                     a      for some great DVDs and instructional videos.                                Guitar Workshop

4.12.1. Remember that big huge DOM tree we just looked at?

 Here's the DOM tree for the HTML you looked at back on page 220.    html head title "Binary Tree Selection"                                   body                   p "Below are two binary tree options:"                    div "Our "   em   " trees are great for folks that are far away."      "depth-first"                     div "Our "          em              " trees are a favorite for nearby neighbors."             "breadth-first"                               p "You can view other products in the "           a            "."                                             "Main Menu"

You can get to this whole thing using the "document " variable in your JavaScript.

You've already seen several ways to use the document object in your code... here are a few reminders from earlier in this chapter.

Get the root element of the document

You can grab the <html> root element from an HTML document using the documentElement property:

 var htmlElement = document.documentElement; documentElement is a special property of the document object. It always returns the root element of the DOM tree. Remember, the root element in HTML is always <html>.

Find an element by its "id" attribute

You've already seen how getElementById() makes it a piece of cake to find an element in your web page, using the element's id attribute.

 var manganese =   document.getElementById("Mg").This   gets the element with an id of "Mg".value;