HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [165]
6. Look at the bottom of the browser.
The status bar at the bottom of the browser window should now contain your message.
7. Experiment.
Play around with the various elements in the DOM list. You can modify many of them. Try changing window.location.href to any URL and watch what happens. Don’t worry; you can’t permanently break anything here.
Examining the document object
If the window object is powerful, its offspring, the document, is even more amazing. (If you’re unfamiliar with the window object, see the section “Navigating the DOM,” earlier in this chapter.)
Once again, the best way to get a feel for this thing is to do some exploring:
1. Reload simple.html.
If your previous experiments caused things to get really weird, you may have to restart Firefox. Be sure the Firebug extension displays the DOM tab.
2. Find the document object.
It’s usually the second object in the window list. When you select this object, it expands, showing a huge number of child elements.
3. Look for the document.body.
Somewhere in the document you’ll see the body. Select this object to see what you discover.
4. Find the document.body.style.
The document object has a body object, which has a style. Will it never end?
5. Look through the style elements.
Some styles will be unfamiliar, but keep going, and you’ll probably see some old friends.
6. Double-click backgroundColor.
Each CSS style attribute has a matching (but not quite identical) counterpart in the DOM. Wow. Type a new color and see what happens.
7. Marvel at your cleverness.
You can navigate the DOM to make all kinds of changes in the page. If you can manipulate something here, you can write code to do it, too.
If you’re lost here, Figure 5-2 shows me modifying the backgroundColor of the style of the body of the document. A figure can’t really do this justice, though. You have to experiment for yourself. But don’t be overwhelmed. You don’t really need to understand all these details, just know they exist.
Figure 5-2: Firebug lets me modify the DOM of my page directly.
Messing with the DOM through Firebug is kind of cool, and it helps you see how the page is organized, but it doesn’t always work. Don’t worry if you can’t make the firebug DOM business work. You see in the next section it’s actually easier to write code that changes the DOM than it is to change it through Firebug. The Firebug DOM tool is mainly used to look over your DOM to see how the page is currently organized in memory.
Harnessing the DOM through JavaScript
Sure, using Firebug to trick out your Web page is geeky and all, but why should you care? The whole purpose of the DOM is to provide JavaScript magical access to all the inner workings of your page.
Getting the blues, JavaScript-style
It all gets fun when you start to write JavaScript code to access the DOM. Take a look at blue.html in Figure 5-3.
Figure 5-3: This page is blue. But where’s the CSS?
The page has white text on a blue background, but there’s no CSS! Instead, it has a small script that changes the DOM directly, controlling the page colors through code.
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
I’ve got the JavaScript Blues
Shouldn’t it be background-color?
If you’ve dug through the DOM style elements, you’ll notice some interesting things. Many of the element names are familiar but not quite identical. background-color becomes backgroundColor and font-weight becomes fontWeight. CSS uses dashes to indicate word breaks, and the DOM combines