HTML and CSS Reference
In-Depth Information
Traversing the Document The final step is to bind the event that toggles the display
of the answers to each of the questions. This is the most complex bit of code on the page.
First, let me explain how the event handler works:
function() {
currentNode = this.nextSibling;
while (currentNode) {
if (currentNode.nodeType == “1” && currentNode.tagName == “DD”) {
if ( == 'none') { = 'block';
else { = 'none';
currentNode = currentNode.nextSibling;
return false;
That's the function that will be used as the onclick handler for each of the questions. As
you may remember, in the context of an event handler, this is the element associated
with the event. The main challenge in this function is locating the answer associated with
the question the user clicked on and displaying it.
To do so, the function will navigate through the DOM to find the next DD element in the
DOM tree following the DT element that the user clicked on. First, I use the
nextSibling property of this , and then I start a while loop that will iterate over each of
the siblings of that element. The while condition ensures that the loop will run until this
runs out of siblings.
The nextSibling property is a reference to the next node in the DOM tree. A node is
different from an element. HTML elements are nodes, but the whitespace between tags is
a node, as is the text inside a tag. So the nextSibling of a node might very well be the
return character at the end of the line following the tag. There are a number of other
properties associated with nodes as well that can be used to traverse the document. Some
are listed in Table 15.2.
TABLE 15.2
Node Properties for Navigating the DOM
An array of all the children of a node.
The first child node of a node.
The markup and content inside a node. You can set this property
to change the contents of a node.
Search WWH ::

Custom Search