the dom is such a useful thing to have under your belt when developing for the web - and for some reason, I find it really fun writing javascript.
this is a really good resource that tells you all the properties and methods associate with different parts of the dom. it's also useful to know about javascript/html event handlers, too - such as onclick, onselect, onblur, onfocus etc, as they are used to trigger javascript functionality in a page.
that previous link might seem a bit daunting at first, but I'll give you a little intro to hopefully help you out a bit.
as GeForce said, you can assign an html element (javascript knows this as an object) to a variable to cut out confusion and make your code cleaner. once you assign this html element, javascript gives it properties and methods to alter pretty much everything about that element, as well as any elements that are contained within it, and any element that contains it. it is possible, though potentially quite messy, to get from any element on your page, to any other using the javascript dom - so it's very useful. I'll show you a broken down version of something I wrote yesterday to give you an idea of what I'm talking about.
In my page, I have a <ul> tag, with multiple <li>s in it. In each <li>, there's an <a> tag. depending on the url of my current page, the class (ie. style) of the link needs to change to reflect that it's the current page. as well as that, the link needs to be unclickable (don't know why, specifically, but I do as I'm told
). The code looked something like this:
Code:
function highlightMenu() {
var nav = document.getElementById('navigation');
for (i=0;i<nav.childNodes.length;i++) {
//we'll assume that I've written my html VERY tidily, as javascript interprets white space as a text object!
var item = nav.childNodes[i];
//again, assuming that the first child node is the link we're looking for, to make this clearer
var alink = item.childNodes[0];
if (alink.href == document.location) {
//take the link text so that it can be used later
var linktext = alink.innerHTML;
//remove the link, for some reason!
item.removeChild(alink);
//give the list item a different class so that it's obvious what page you're on
item.className = 'selected';
//use the link text from the now destroyed link so that your menu doesn't look confused
item.innerHTML = linktext;
//stop the script running, as you've already achieved what you set out to do
return true;
}
}
}
that might be totally unhelpful, but it gives you an idea of what can be achieved
It just makes the code a bit easier to read, without there being 's and "s all over the place!