March 2006
Beginner to intermediate
448 pages
13h 33m
English
Content preview from Head Rush Ajax
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
Start your free trial
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