![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
The exercises in this article give you practice in:
- Traversing the DOM using a number of different JavaScript properties
- Targeting nodes
- Retrieving and changing the values of nodes and their attributes
- Manipulating the DOM
- Adding, removing, and replacing nodes using JavaScript properties
To work through these exercises, you should have an HTML editor and a working Internet connection or localhost environment in which to test your JavaScript.
Exercise 1: Traversing the DOM
Knowing how to traverse the DOM using JavaScript provides a foundation to altering an HTML page in real time. Using the HTML markup in Listing 1, perform these tasks:
- Use the
firstChildproperty to access an element. - Use the
lastChildproperty to access an element. - Use the
nextSiblingproperty to access an element. - Use the
previousSiblingproperty to access an element. - Use the
parentNodeproperty to access an element. - Use the
childNodesproperty to access a group of child elements.
Listing 1. HTML markup for the traversing the DOM exercise
<html>
<head>
<title>JavaScript and the Document Object Model</title>
</head>
<body>
<div id="page">
<div id="header"><h1 id="title">Page title</h1></div>
<div id="content">
<h2>Content title</h2>
<p>Some copy goes here</p>
<p>More copy goes here</p>
</div>
</div>
</body>
</html>
|
In exercise 1, you learned how to target nodes in several ways. Continuing to use the markup in Listing 1, perform the following tasks:
- Retrieve the value of a node using
nodeValue. - Change the value of a node using
nodeValue. - Retrieve the value of a node attribute.
- Change the value of a node attribute.
Exercise 3: Manipulating the DOM
Now that you know how to traverse the DOM and alter node values, the next logical step is to learn how to add, remove, and replace nodes. Perform the following tasks:
- Use the
appendChildmethod to add a node. - Use the
insertBeforemethod to add a node. - Use the
removeChildmethod to remove a node. - Use the
replaceChildmethod to replace a node.
Follow these solution steps to check your work.
-
Learn more about "JavaScript
and the Document Object Model" (developerWorks, July 2002).
-
To learn more about the fundamentals of the JavaScript language, check out
"Get
started with the JavaScript language, Part 1: JavaScript language fundamentals"
(developerWorks, April 2011) and
"Part 2:
Events, cookies, timing, and more" (developerWorks, August 2011).
-
Stay current with developerWorks
technical events and webcasts focused on a variety of IBM products and IT
industry topics.
-
Follow developerWorks on Twitter.
Kris Hadlock has been a contract web developer and designer since 1996. He has worked on projects for companies such as SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software, and Fire Mountain Gems. He is the author of Ajax for Web Application Developers (Sams) and The ActionScript Migration Guide (New Riders) as well as a featured columnist and writer for numerous websites and design magazines, including Peachpit.com, InformIT.com, and Practical Web Design magazine. Kris is also the founder of www.studiosedition.com, a web design and software development studio specializing in fusion of form and function.
