Beginning DOM Manipulation Part 2
on Sat Jul 05 08:36:28 GMT 2008 in Javascript and viewed 8621 times
Part two of how to begin manipulating elements on a page on-the-fly using the Document Object Model with Javascript. Covers getting and setting attributes and values.
In the last article, we covered how to begin to manipulate page elements using Javascript and the Document Object Model. In this tutorial, we’ll cover how to get and set attributes of elements, using the easy DOM conventions, and using getAttribute, and setAttribute.
Let’s start with a real-world application of the DOM. Let’s try an image gallery. Cliche, yes, but it’s good for our purposes. We need some pictures, a few links, and maybe a placeholder.
<html>
<head><title>Using more DOM</title></head>
<body>
<img src="placeholder.jpg" /><br />
<ul>
<li>
<a href="images/treedom.jpg"><img src="images/treedom_thumb.jpg" /></a>
</li>
<li>
<a href="images/treeplant.jpg"><img src="images/treeplant_thumb.jpg" /></a>
</li>
</ul>
</body></html>
Very basic. Two pictures that will be thumbnails, and a larger placeholder to be replaced with the pictures later. Now to start getting it DOM ready, let’s add an id attribute to the placeholder to be easily accessed, so we’ll put: <img src="placeholder.jpg" id="placeholder" />. That’ll make it much easier to replace with the image.
Now let’s start an easy function to see this image.
This will be in script.js for our application.
function changeImage(pic){
if (!document.getElementById) return false;
var placeholder = document.getElementById("placeholder");
var picture = pic.getAttribute("href");
placeholder.setAttribute("src", picture);
}
The first line of code is the function declaration, which takes one argument, the picture to use. This is followed by a quick compatibility check to make sure our code is accessible to those with javacript off. Then we define a variable, placeholder, to the element with the id of “placeholder”, which, if you remember, is our placeholder image. Then we get the location the link will go to in our picture variable. The getAttribute function takes one argument, which is the name of the attribute; it then returns the value of said attribute. Then we set our placeholder picture’s src, or source image to the href value of the link, which would have made our browsers go to that location.
Now all you need to do is implement it in the correct way. Our finished code could look something like this:
<html>
<head><title>Using more DOM</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="placeholder.jpg" /><br />
<ul>
<li>
<a href="images/treedom.jpg" onclick="changeImage(this); return false;"><img src="images/treedom_thumb.jpg" /></a>
</li>
<li>
<a href="images/treeplant.jpg" onclick="changeImage(this); return false;"><img src="images/treeplant_thumb.jpg" /></a>
</li>
</ul>
</body></html>
It’s just a matter of adding the onclick attribute to the links. The return false; part ensures the browser won’t go anywhere, otherwise the image would change, but the browser would go to the picture anyways.
This would look done. But we could add a bit more to this, using the DOM conventions to access attributes. Instead of putting:
element.getAttribute("att")
We could have just put:
element.att
Same with setting.
element.att = "value"
As opposed to:
element.setAttribute("att", "value")
So knowing this, for our onclick attributes, we could have easily put:
<a href="images/treeplant.jpg" onclick="changeImage(this.href); return false;">
Which would change our script to being something like:
function changeImage(pic){
if (!document.getElementById) return false;
var placeholder = document.getElementById("placeholder");
placeholder.src = pic
}
Much easier to write.
And that about sums up getAttribute and setAttribute. The only thing left to understand in the next tutorial would be the innerHTML property, and playing God with the DOM tree, namely creating and destroying nodes from within the DOM tree.