Tutorial 1: Accessing the DOM

Lesson 1: getElementById

Finding a node on a page is the most fundamental task when working with the DOM from JavaScript. The most useful function is document.getElementById('elementId')^[?]. This function takes a string and returns the DOM element with that ID.

Here is an image of a star:  

This is the DOM tree for the above image:

<img id="star" src="star_off.gif">

Write some JavaScript code below that finds the above image element using getElementById, then sets the element's src^[?] property so that the star becomes on. There is a 'star_on.gif' image on this server.

Execute   See Answer

Lesson 2: childNodes

Sometimes the node you want to manipulate does not have an ID. This is particularly true of text nodes, which can't have IDs. But there may still be ways to find a node that doesn't have an ID. Each node has a childNodes^[?] property that contains an ordered array of all its children. One can index into this array.

Here is a span containing three stars:  

This is the DOM tree for the above span:

<span id="stars">
┣ <img src="star_off.gif">
┣ <img src="star_off.gif">
┗ <img src="star_off.gif">
</span>

Write some JavaScript code below that finds the above span element using getElementById, finds the middle star using childNodes, then sets the element's src property so that the star becomes 'on'. The other two stars should be 'off'. Remember that arrays in JavaScript start with index 0.

Execute   See Answer

Lesson 3: firstChild & lastChild

There's a shortcut for finding the first and last child nodes, firstChild^[?] and lastChild^[?].

Here is a phrase with a star:   Twinkle twinkle little star.

This is the DOM tree for the above span:

<span id="phrase">
┣ Twinkle twinkle little
┗ <u>
  ┣ <img src="star_off.gif">
  ┗ star
  </u>
</span>

Write some JavaScript code below that finds the above span element using getElementById, finds the star using firstChild and/or lastChild, then sets the element's src property so that the star becomes 'on'.

Execute   See Answer

Lesson 4: previousSibling & nextSibling

Nodes also have previousSibling^[?] and nextSibling^[?] properties that allow one to slide sideways on the DOM tree.

Here is another span containing three stars:  

This is the DOM tree for the above span:

<span>
┣ <img src="star_off.gif">
┣ <img src="star_off.gif">
┗ <img id="laststar" src="star_off.gif">
</span>

Write some JavaScript code below that finds the last star, then walks back to turn the first star 'on'. The other two stars should be 'off'.

Execute   See Answer

Lesson 5: parentNode

The last DOM-walking property is parentNode^[?]. As might be expected, this returns the node that encloses the current node.

Here is a more complex snippet:   Twinkle twinkle little

This is the DOM tree for the above span:

<span>
┣ <b>
┃ ┗ <small id="start_here">
┃   ┗ Twinkle
┃   </small>
┃ </b>
┗ <i>
  ┣ twinkle little
  ┗ <img src="star_off.gif">
  </i>
<span>

Write some JavaScript code below that starts with the small tag, then walks to the star and turns it 'on'.
Bonus: Not counting getElementById and src, can you do it in only three steps?

Execute   See Answer

Exercise: Tree Walker

One final detail is that the firstChild, lastChild, previousSibling, nextSibling, and parentNode properties return null if there is no such child, sibling or parent node. Likewise, the childNodes array is of length zero if there are no child nodes.

You now know the API for navigating your way around any DOM tree. For this exercise, put all these pieces together to write a function called nextNode that can be used to walk through all the nodes of a DOM tree. The function should take a node as an argument, and return the next node in the tree. For example, the following loop would visit every node once, and only once:

  var node = document.body;
  do {
    node = nextNode(node);
  } while (node != null)

This is not an easy exercise, it requires careful thought. Beware of infinite loops which may crash your browser.

nextNode = function(node) { //...Code goes here to walk to the next node... return node; };
Execute single step Reset to start

Test your nextNode function by repeatedly clicking the "Execute single step" button. It will highlight each node in sequence, starting with the title of this exercise. Elements (which correspond with HTML tags) receive a green border, text nodes receive a green background.

Use the Intro to JavaScript forum to share your solution to this exercise and see other people's solutions.