Head Rush Ajax

you’re on your way �

225

the document object model

Browsers see the world upside down

Of course, browsers don’t literally store a picture of a tree with your markup on

it. If you want to really understand what the browser stores in memory, you need

to learn about the DOM. Let’s see how the browser takes the tree you just looked

at and represents it with objects.

First, the browser ips the entire tree upside down so the <html> element is at

the top of the tree instead of the bottom:

html

“Below are our ne

binary tree options:”

p

p

“Binary Tree Selection”

title

“You can view other

products in the “

“Main Menu”

a

“.”

“depth-rst”

“breadth-rst”

“ trees are great for folks

that are far away.”

em

em

“ trees are a favorite for

nearby neighbors.”

“Our “

“Our “

div

div

head

body

When you’re working with the DOM,

the “top” of the tree is the root

element. In a web page, that’s <html>.

With this “top-down” view

of the HTML, you can see

a node’s parent element,

and any child nodes, easily.

parent

child

Here’s the text in the second

<div>, broken up into several text

nodes to keep the emphasized

word in the right place.

Even though we

ipped the tree over,

we still move from

left-to-right when

we order nodes.