Javascript - document.links.className ?

Question

I have a Javascript question that I am curious about. When using:

var test = document.links(arrayNum).name;

Is it possible to dig deeper into specifying links? For instance, if there is just a group of links from within a div with an id that you would like to target as opposed to all the links on the page could you write something like:

var test = document.getElementById('divId').links(arrayNum).name;

Or could I add a class to the statement to target only the links associated with it?

var test = document.links.className(arrayNum).name;

Is anything like this feasible?

Answer 1

document.links is purely document-wide, but there are other DOM methods you can use, eg.:

var test= document.getElementById('divId').getElementsByTagName('a')[n].name;

and:

var test= document.getElementsByClassName('someclass').name;

(that one is quite new and not supported by all browsers, so if you want it to work everywhere you'll have to add fallback, and be careful for the difference between live and non-live node lists.)

(Note [] array index syntax not (). And incidentally, why name? Typically you'd avoid <a name> today in favour of general-purpose id today.)

Answer 2

The links collection belongs to the document object only, it is not on the prototype chain for elements. It's not quite the same thing, but you can get all the <a> tags of a particular element using getElementsByTagName:

// retrieve a collection of all a elements
var test = document.getElementById('divId').getElementsByTagName("a");

In browsers that support it, you can use querySelectorAll:

// retrieve a collection of all links
var test = document.getElementById('divId').querySelectorAll("a, area");

Or you could use a library like jQuery or mootools to do all the hard work for you:

var test = $("#divId a, #divId area");