Head Rush Ajax

232

Chapter 4

Moving around in a DOM tree

You already know how the document object can help you nd an

element with a particular id attribute, but there are a lot of other ways

you can get around in a DOM tree. Since each node has a parent, and

most element nodes have children, you can move up and down in the

DOM tree using these connections.

Here’s part of the DOM tree from page 226; let’s look at how you could

move around the tree, starting with one of the <div> elements:

body

“breadth-rst”

“ trees are a

favorite for

nearby neighbors.”

“Our “

em

divNode.parentNode

divNode.childNodes

divNode.rstChild

divNode.lastChild

Here’s the <div> that we’re

starting from. It’s a node

object in the DOM tree.

You can get the parent of

the <div>, which is the <body>

element, by using the <div>

node’s parentNode property.

The childNodes property

gives you an array of all the

<div>’s child nodes.

You can get to the last

child of the <div> with the

lastChild property.

If you want to go straight

to the rst child, use the

rstChild property of the

<div>’s node object.

You could use the <em>

node’s rstChild, lastChild,

or childNodes property to

get to this text.

div

Start reading HERE!

Everything in this diagram

starts with this <div>.

divNode is the

variable name

pointing to

the <div> in

this diagram.

dom nodes