Understanding the fundamentals of JavaScript: Traversing the DOM

Tutorial:

Understanding the fundamentals of JavaScript: Traversing the DOM

By Cameron McKenzie

TheServerSide.com

To understand a topic as complex as JavaScript and DOM traversal, not to mention the various JavaScript libraries that are on the market including JQuery, DOJO, Alloy and YUI, it's important to have a strong understanding of the basics of HTML and JavaScript. When tackling a potentially fearsome topic, it is always a smart approach to work through a simple and straight forward scenario. Creating an application based around the very familiar Rock-Paper-Scissors game, otherwise known as Roshambo, is a perfect place to start.

How would you create a basic Roshambo game using HTML? One way might be to offer the client three links, one for each of rock, paper and scissors, and implement some type of logic to figure out of the client has defeated the computer. If we make a silly rule that says in the first iteration of this game, the computer always chooses rock, then we can say that if the client playing the game chooses rock then it's a tie, if they choose paper it's a win for the client, and if the client chooses scissors, they lose. Four HTML pages can provide a pretty simple implementation of this application.

The landing page: index.html

<html>
<body>
<p>Which one will it be?</p>
<div id="choices">
 <a href="tie.html">rock</a>
 <a href="win.html">paper</a>
 <a href="lose.html">scissors</a>
</div>
</body>
</html>

When the client wins: win.html

<html>
<body>
<p>Which one will it be?</p>
<div id="choices">
 <a href="tie.html">rock</a>
 <a href="win.html">paper</a>
 <a href="lose.html">scissors</a>
</div>
</body>
</html>

When the client does not win: lose.html

<html>
<body>
You lose!
</body>
</html>

When it's a tie: tie.html

<html>
<body>
You tie!
</body>
</html>

The result is simple functionality. It's not particularly impressive, but it's a good first step.

Introducing some JavaScript

The eventual goal is to perform JavaScript logic to figure out who has won the game, so introducing some JavaScript at this point isn't a bad idea. We will start slowly, simply having the game results displaying in a little popup window. We will add a script element into the head section of the page, and add a method called popUpResult which is passed a String as an argument, representing the URL of the page to be displayed. Where we previously simply had href elements in anchor tags, we will call our popUpResult JavaScript function, passing in the name of the page to display to the end user.

The new iteration of the index.html page looks as follows:


<html>
<head>
<script>
popUpResult = function(url){
 open (url,"", "top=200,left=200,height=400,width=800,scrollbars=yes");
}
</script>
</head>
<body>
<p>Which one will it be?</p>
<div id="choices">
 <a href="JavaScript:popUpResult('tie.html')">rock</a>
 <a href="JavaScript:popUpResult('lose.html')">paper</a>
 <a href= "JavaScript:popUpResult('win.html')">scissors</a>
</div>
</body>
</html>

Traversing the DOM

A good developer knows that mixing HTML and JavaScript together too much is never a good idea. Notice how all of the links in the HTML page are now decorated with that ugly JavaScript:popUpResult entry? By manipulating the DOM in our JavaScript, we can actually associate each anchor link with the popUpResult JavaScript method, and not have to pollute our HTML. To do so, we simply ask for all of the anchor links inside our <div> tag named choices. We can then associate each link with our JavaScript function. All of this gets performed in a special JavaScript event method called window.onload, a method which is pretty self explanatory.


<html>
<head> <script> window.onload = function() {
var element = document.getElementById('choices');
var anchors   = element.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++ ) {
anchors[i].href = "JavaScript:popUpResult('" + anchors[i].href + "')";
}
}

popUpResult = function(url){
 open (url,"", "top=200,left=200,height=400,width=800,scrollbars=yes");
} </script>
</head>
<body>
<p>Which one will it be?</p>
<div id="choices">
 <a href="tie.html">rock</a>
 <a href="lose.html">paper</a>
 <a href="win.html">scissors</a>
</div>
</body>
</html>

As you can see from the three iterations, it is easy to start introducing JavaScript into your code to add some basic logic and functionality. And by working with the DOM and manipulating content nodes, it's possible to keep your HTML very clean, and maintains a nice separation between HTML and JavaScript logic.

In our next tutorial, we will further improve our example by leveraging the JavaScript event model.

17 Feb 2014

Related Content

Related Resources