The difference between javascript’s getElementById() and getElementsByName()
The above question is one I’ve gotten in my logs a couple of times. I don’t actually answer it anywhere on the site, so I figured I might as well answer it here. For some strange reason, in my mellowed old age, I’m all about helping and I haven’t written about web technologies in about a month, so it can’t hurt.
The basic answer is this-
- getElementById() is incredibly useful. If you write any JavaScript at all, you’ll likely use it all the time
- getElementsByName() isn’t really useful at all. I’ve never used it ever and can’t really think of a place where I would use it. I rarely use the
nameattribute and can’t really see where I would want to use it in any way that would make sense in the context of this method.
To define them, the specs say
getElementsByName
With HTML 4.01 documents, this method returns the (possibly empty) collection of elements whose name value is given byelementName(The name attribute value for an element.) In [XHTML 1.0] documents, this methods only return the (possibly empty) collection of form controls with matching name. This method is case sensitive.
Which is to say you pass the method a string (the name) and you get back a nodeList , a collection of elements with matching that name.
Which is, as far as my experience goes, a big pile of useless.*
getElementById
Returns the Element whose ID is given by elementId. If no such element exists, returnsnull. Behavior is not defined if more than one element has this ID.
Which means- pass this method a string (the id) and this method will return either an element matching that id or null. This is probably one of the most used DOM methods in the Javascript universe. Accessing and manipulating elements is what JavaScript is all about and getElementById is the handiest method for accessing an individual element on a page.
*which isn’t to say I don’t want to hear about a really cool use of it if there’s one out there. If you’ve got one, please share! I love seeing interesting code samples 
Alan Says:
Excellent info — thank you!
Posted: February 12th, 2008 at 4:30 pm
sid Says:
what about is you have multiple groups of check boxes and would like to select / deselect each group
I see this function being useful there.
Sid
Posted: February 29th, 2008 at 1:20 am
rob Says:
That’s a perfect example. Thanks.
I actually ended up using this myself after writing this article. I was interfacing with a form created by some Java code and the only identifier was a name attribute.
Posted: February 29th, 2008 at 9:30 am
Nicklas Says:
getElementById() seems to find element by name attribute as well
Posted: April 8th, 2008 at 8:36 am
thaanaasis Says:
Hello!
In the following code, I came up with a small technicality. Somewhere I have a php function which aims to create 52 buttons, one for each week of the year.
———————————
<?php function calendar_week($start_week,$counter) {
for ($i=$start_week;$i<$counter+$start_week;$i++)
{
echo “”;
}
}
?>
—————————————-
On another part of the code, I use a javascript function that tries to get the previous 52 buttons and change the buttons’ color:
—————————————-
function …{
…
for (var j=1;j<53;j++) {
document.getElementById["week_j"].style.backgroundColor=”blue”;
}
…
}
—————————————-
The problem is that I haven’t found yet a way to reference “week_j”, in order to avoid writing the same line 52 times (i.e. document.getElementById["week_(1 to 52)"].style.backgroundColor=”blue”;
Thank you all in advance!
Posted: April 23rd, 2008 at 2:46 am
thaanaasis Says:
Sorry for the (annoying) multiple postings, but what is wrong with php commands???
I cannot paste my one line code, so I’ll try to attach pseudo-code instead:
td (start) newline
input type (equals) button
name (equals) calendar(underscore)week(underscore)(dollarsign)i
id (equals) week(underscore)i
newline
td (end) newline
Thanks !
Posted: April 23rd, 2008 at 2:57 am
rob Says:
you could do something like this:
for (var j=1;j<53;j++) {
var newID = “week_”+j;
document.getElementById[newId].style.backgroundColor=”blue”;
}
Posted: April 23rd, 2008 at 6:58 am
Martin Rinehart Says:
Don’t go dissin’ my good buddy getElementsByName(). Give him some love.
Notice the singular, getElementById(), and the plural, getElementsByName(). Since you must give radio buttons a common name, getElementsByName is the way to go to get the whole group.
Posted: July 5th, 2008 at 12:24 pm