Practice: JavaScript and the Document Object Model

Take your knowledge of JavaScript a bit further—into the DOM. Through the exercises in this practice, learn how to use JavaScript properties to traverse the DOM, targeting nodes, changing node values, and manipulating attributes.

Share:

Kris Hadlock (kris@krishadlock.com), Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris 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.



01 November 2011

Also available in Japanese

About this article

These exercises and solutions supplement the developerWorks article "JavaScript and the Document Object Model (DOM)," which is part of the developerWorks knowledge path "A comprehensive guide to JavaScript." You may want to read the "JavaScript and the Document Object Model" article before working through these exercises.

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:

  1. Use the firstChild property to access an element.
  2. Use the lastChild property to access an element.
  3. Use the nextSibling property to access an element.
  4. Use the previousSibling property to access an element.
  5. Use the parentNode property to access an element.
  6. Use the childNodes property 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>

Exercise 2: Targeting nodes

In exercise 1, you learned how to target nodes in several ways. Continuing to use the markup in Listing 1, perform the following tasks:

  1. Retrieve the value of a node using nodeValue.
  2. Change the value of a node using nodeValue.
  3. Retrieve the value of a node attribute.
  4. 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:

  1. Use the appendChild method to add a node.
  2. Use the insertBefore method to add a node.
  3. Use the removeChild method to remove a node.
  4. Use the replaceChild method to replace a node.

Exercise solutions

Follow these solution steps to check your work.

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=767893
ArticleTitle=Practice: JavaScript and the Document Object Model
publish-date=11012011