The ultimate getElementsByClassName, anno 2008
Two and a half years ago, I released the first version of getElementsByClassName. With how web browsers has evolved since, I thought I’d release a real ultimate version, dated 2008. 
Native web browser support
Safari 3.1 has native getElmentsByClassName support, and upcoming Firefox 3 and Opera 9.5 will have it too. It only leaves out, you’ve guessed it, Internet Explorer.
The necessity of this script
Living in a world where Microsoft is halting every possible way the web could evolve, this means that you will need a custom script for this for years to come. Also, the native version returns just a nodelist, as opposed to an array, which may somewhat limit your options to work with it.
New features
When I rewrote the script (download new version), there were a number of factors I wanted to include to make it the best script available for this task:
- Utilize native
getElementsByClassNamesupport if it’s available. - Utilize native
XPathsupport if it’s available. - Support multiple class names in the same call, in any order specified.
- Return an actual
arrayto work with, instead of just the native nodelists.
The way it works is that it detects the available native support, and then re-uses that for consecutive calls. This will lead top optimal performance for the end user experience. Please take a look at the demo page, which consists of a hefty 130 kb raw HTML, to compare execution times between call types, web browsers and platforms.
The script
The script should support basically any web browser being used today, and also has support back till IE 5.5. This is how the script now looks like:
/*
Developed by Robert Nyman, http://www.robertnyman.com
Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};
How to call it and parameters
Parameters
className- One or several class names, separated by space. Multiple class names demands that each match have all of the classes specified. Mandatory.
tag- Specifies the tag name of the elements to match. Optional.
elm- Reference to a DOM element to look amongst its children for matches. Recommended for better performance in larger documents. Optional.
Call examples
- To get all elements in the document with a “info-links” class.
getElementsByClassName("info-links");- To get all div elements within the element named “container”, with a “col” class.
getElementsByClassName("col", "div", document.getElementById("container"));- To get all elements within in the document with a “click-me” and a “sure-thang” class.
getElementsByClassName("click-me sure-thang");
Download the new getElementsByClassName
The new version is available for download right as we speak, so by all means, download it, take it for a spin, and experience selecting elements through their class names cross-browser, cross-platform without having to worry about any differences.
130 Comments/Reactions
May 27th, 2008 at 15:59
[...] completely rewritten version of getElementsByClassName has been released, taking into account all new available web bowser features and possibilities, to [...]
May 27th, 2008 at 16:00
[...] Update to a classic javascript function (anno 2005, if not earlier) in order to take advantage of the native getElementsByClassName function or XPATH (if available, with fallback mechanisms in place) Spread the word! [...]
May 27th, 2008 at 16:50
Nice.
In your first example, shouldn’t it just say “..get all elements..” instead of “..get all a elements..”, though?
May 27th, 2008 at 17:42
Why not use the Selectors API when it’s available (e.g in IE8)?
May 27th, 2008 at 19:26
kimblim,
Absolutely right, thanks! Updated the post.
Milo,
I did consider that a while, but the day IE 8 finally gets out (and I’m fairly sure we’re not talking this year), I’m convinced that they will include native
getElementsByClassName; if for no other reason, due to popular demand.With DOMAssistant, we rely on the Selectors API in web browsers that support it, and have XPath and other fallbacks when either the web browser fails, or if it’s a non-standard selector.
With this function, though, it is targeted solely at getting elements by class, and using the Selector API seems a bit overkill.
However, if IE 8 for no reason won’t support
getElementsByClassName, then naturally, using Selectors will be the solution here.May 27th, 2008 at 21:10
This looks a lot like the revision I made almost a year ago (getElementsByClassName re-re-re-visited) except that I did not add namespace support (never had the need for it) and don’t support the usecase where you want to have elements that match more than 1 particular class (never had the need for that either and only once I had the need to do the opposite – selecting elements that match either of a list of classes – which the native gEBCN doesn’t support).
I think partly as a result mine might be a bit faster…
May 27th, 2008 at 21:49
Tino,
Ah, it looks very similar.
I thought that namespace support and especially multiple classes would make it a bit more complete. With just one class, the performance hit shouldn’t be too bad. As you can see in my simple test page, the overall times are definitely good, in my opinion.
Thinking so alike, perhaps we should write something together one day.
May 27th, 2008 at 22:34
Robert: I’d might be interesting to exchange thoughts someday yeah, contact me anytime
By the way, for my employer I use a version of gEBCN that supports regular expression syntax for className (it does fallback to the ‘generic’ method in that case, but that’s fast enough in most cases). Downside is that you can’t do branching for the definition of the function itself.
May 27th, 2008 at 22:47
Tino,
Yeah, such specific tweaks are definitely options in certain environments. Personally, though, I think that when one starts to make it fairly complex, the CSS selector approach with different JavaScript libraries seems more suitable and more tested.
Also, I do hope we get to talk and meet one day. We’ll just have to see what the future holds.
May 28th, 2008 at 0:11
fwiw: [a-z]+ doesn’t match tags like h[1-6]. Besides, the whole regexp matching in the loop seems useless when ‘tag’ isn’t given or equals ‘*’
In your ultimate fallback it might be worth to branch when classesToCheck.length == 1 and first check for equality on .className which saves a (more expensive) regexp call in most cases
May 28th, 2008 at 9:31
Looks very complete, Robert!
I’ve used a combination of a custom
Array.contains()method andelement.className.split (' ')to look for classes.Something like:
element.className.split (' ').contains ('searchClass');I haven’t dabbled in Xpath and the Selectors API yet actually, but from all I hear about it, I think it’s about time I start learning
May 28th, 2008 at 16:01
Sweet. Thanks, Robert! One thing I’m wondering and wasn’t clear to me from reading the JS (’cause I’m a JS n00b): does this version support the several-class
getElementsByClassName(document, "div", ["col", "left"]);pattern of the older script, or no? Though I guess if it does the new pattern would begetElementsByClassName(["col", "left"], "div", document);.May 28th, 2008 at 19:57
Tino,
Ah, thanks for spotting the heading thing. And yes, the superfluous check when a tag isn’t sent in has been removed too.
However, with the fallback for IE, a regular expression is still necessary, since even though just one class name is sent in, the element might contain multiple ones, so it’s necessary for checking and comparing.
I’ve issued a new release, 1.0.1, with the above fixes, and have also updated the post above.
Harmen,
Thanks! Yes, the Selectors API and XPath is definitely something to dig into.
Eric,
Thank you!
It is almost as you mention it, but as opposed from the old version (and in line with the web browser native implementation) it doesn’t need any array anymore, just the desired class names separated by spaces. Like, with your code:
getElementsByClassName("col left", "div", document);Also, they don’t have to be specified in that order on the actual HTML element either, so it will always work as long as they’re present at all.
May 28th, 2008 at 22:42
Nicely done Robert. Way to push the envelope with current and upcoming browser support for the native version.
May 28th, 2008 at 22:45
Grant,
Thank you!
May 29th, 2008 at 3:15
Ah, okay. I guess I misunderstood how that syntax worked with the old plugin– I thought it was an OR, not an AND as in traditional CSS. So, cool. Thanks again! You rock, sir.
May 29th, 2008 at 8:15
Eric,
Thanks a lot!
I’ve always been a great fan of your CSS work and it has made my coding skills grow considerably, so any way I can give something back, I’m just happy to help!
May 31st, 2008 at 19:09
You could tidy up a bit by self invoking and return the supported function (rather when redeclaring and recalling the script). Alternatively you could of course just scrap the wrapping the if statement all together (as every function costs performance, stylistic preferences take a back seat on my javascript).
For looping through NodeLists and arrays…
var i = 0;while (current = elements[i++]) {
}
Is faster and IMO easy to read than…
for(var l=0, ll=elements.length; l<ll; l+=1) {current = elements[l];
}
Also
array[array.length]="foo";runs faster thanarray.push("bar");and would have the small plus of adding IE5 support to you script.Since your going all out to make the “ultimate” version you may want to add the uses of xml.selectNodes for when IE is working with XML.
May 31st, 2008 at 19:36
Aldrik,
Thanks for the input.
The cost if if checking and applying is only run the first time the function is called, and it has then learned for consecutive calls which way to do it is the best way for that certain web browser/environment.
With looping, I’m very reluctant to add variable assigning to expression checking, and it is also something that goes against the advice of JSLint.
About scrapping
pushfor adding it to the length of the array, it’s something I thought of, both for performance and IE 5.0 support, so thanks for pointing that out. It will be in the next release!Like the idea about
selectNodes, and I never really even thought about support in XML documents.Also, I just have to say that the name ultimate, at least on my behalf, is mostly ironic, since I believe that no function or method can truly ever become ultimate for all needs and scenarios.
May 31st, 2008 at 20:43
I’m aware that the statement runs only once, it’s just that it could be written a bit more elegantly.
var getElementsByClassName = function (className, tag, elm){if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
//...
}
return getElementsByClassName(className, tag, elm);
};
vs
var getElementsByClassName = function (){if (document.getElementsByClassName) {
return function (className, tag, elm) {
//...
}
}();
vs
var getElementsByClassName;if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
//...
}
As for the
++(and--) that is one of the few things I disagree with Crockford about (the other is wether one should extend JavaScripts baseObject). But if you wish to fellow blindly, you could of course do the slightly less efficient and elegant…var i = -1;while (current = elements[(i+=1)]) {
//...
}
June 2nd, 2008 at 3:18
[...] The ultimate getElementsByClassName, anno 2008 – Robert Nyman updates the useful script to include support for the native functions in Safari 3.1 and the upcoming Firefox 3 and Opera 9.5. Very nice. [...]
June 2nd, 2008 at 19:46
Aldrik,
Well, what’s elegant is just in the eye of the beholder, right?
With Crockford and ++, I’m on the same page as you.
And no, I’m not following blindly, I agree on some things while I disagree on others.
June 3rd, 2008 at 10:56
I’m not sure word-boundary is a good test for your regex, other than that it looks good.
var elem = elem || document;
So simple
June 4th, 2008 at 19:36
Anthony,
Ah, but that’s only for checking actual node/tag names, which can only contain regular characters. In the script checking for class names, it instead checks for spaces and start/end of string, since word boundaries isn’t complete there.
And thanks!
June 13th, 2008 at 0:19
[...] The ultimate getElementsByClassName, anno 2008 [...]
June 13th, 2008 at 17:42
[...] Nyman has posted an updated version of his ultimate getElementsByClassName. It takes advantage of the native getElementsByClassName support in Safari 3, Firefox 3 and Opera [...]
June 18th, 2008 at 12:16
I used this function in a project at work and it works great! Thanks Robert!
June 18th, 2008 at 12:24
micke,
Great!
June 24th, 2008 at 20:23
Are there any examples of this in use? I am trying to use it in conjunction with PHP to get/set classes and I’m having some trouble.
July 2nd, 2008 at 11:18
Thanks heaps Robert – this script was just what I needed for my Intranet project.
I owe you a beer!
July 4th, 2008 at 15:21
Hi thanks for this.
I found this one surfing the web, it is very efficient, you might be able to adapt it to your method signature.
Regards:
//@http://gathering.tweakers.net/forum/list_messages/1025018
var getElementsByClassName = function (className)
{
var classes = className.split(” “);
var r = [];
for(var j=0; j -1)
{
s = [document.documentElement || document.body], i = 0;
do
{
e = s[i];
while (e)
{
if (e.nodeType == 1)
{
if (e.className && re.test(e.className)) r[l++] = e;
s[i++] = e.firstChild;
}
e = e.nextSibling;
}
}
while (i–);
}
else
{
s = document.getElementsByTagName(‘*’), i = s.length;
while (i–)
{
e = s[i];
if (e.className && re.test(e.className)) r[l++] = e;
}
}
}
return r.length;
}
//@http://gathering.tweakers.net/forum/list_messages/1025018
July 9th, 2008 at 5:13
actually am using ie7 this code is not at all useful for me. somebody please help me. i just solved my problem by using getelementsbytag() method.
July 17th, 2008 at 10:51
Thanks a lot !!!!!!!!!!!
July 18th, 2008 at 12:38
Hi Robert, thanks for sharing.
I realise the people above are only trying to assist with improvements, but I think it can be quite demoralising when all you seem to receive is suggestions for improvement or criticism, rather than recognition for what you have succeeded in doing.
So, on behalf of all those who have found this script useful, helpful or just interesting;
Cheers!!
John.
July 29th, 2008 at 2:24
[...] The ultimate getElementsByClassName [...]
July 31st, 2008 at 23:34
[...] if this is an old thread, could still be of use to someone The ultimate getElementsByClassName, anno 2008 – Robert’s talk – Web development and Internet … Your Favourite getElementsByClassName – Snook.ca __________________ http://www.benshu.ch // Evolving [...]
August 9th, 2008 at 20:22
This seems strange, and I’m assuming I’m overlooking something simple, but anyhow – I can’t get the call to work in an onclick in FF3:
<a href="javascript:;" onclick="someMatches = getElementsByClassName('someClass'); alert(someMatches.length);">test</a>However, it does work if I do it in a window.onload (like in your demo page – http://www.robertnyman.com/test/getelementsbyclassname/test.htm). I’ve figured out a way around this, by simply adding a caller function to the end of the script:
getElementsByClassNameCaller = function(className,tag,elm){
return getElementsByClassName(className,tag,elm);
}
I’m hoping/assuming that I’m just doing something wrong, and that this shouldn’t be needed (in IE, the straight call works fine, it is only in FF3 that I’ve been running into it returning 0 items always) – but if not, is this missing just because you normally only use this function in a window.onload? Or am I overlooking something here?
August 12th, 2008 at 3:39
Robert,
Just a note on your exasperation with some critical posters who seemed to be picking your work apart without thought of a little – nice job, kudos – praise in passing.
You might think of it this way; if people didn’t find it valuable and worthy, they wouldn’t have come back with their ‘my trick is better’ stuff, it wouldn’t have been worth the time. I know, it’s a back-handed form of respect. Some add their two-cents because they do think they contribute an improvement. Some are just trying to say, “Oh yeah, I can do it better.” N’importe. Either way, they’ve acknowledged the value and quality of your work. Translate that subtext into the praise it really is and bask in it – much better than feeling you’re not being validated or appreciated.
Ps. judging from your banner photo, you might like the work of Robert Newport at http://www.doctorobertsart.com/ Oh,& I hope you’re enjoying the time with the kids during your parental leave. Suck it up while you can, it passes so quickly…. best, red.
August 18th, 2008 at 21:53
Marcy,
You need to provide more info for me to be able to help you.
Paul,
Great!
Nejoom,
Absolutely, if you want to.
sanish,
You need to provide more info for me to be able to help you.
Anth,
You’re welcome!
John Goodwin, red,
Thank you!
I appreciate the compliments, and I do like people giving feedback and tips; I mean, after all, that’s how it becomes even better and other people will surely be able to find things I’ve missed.
The way I see it, if the input is something I really have to change I’ll update the code. Otherwise, the code is released under such a license that anyone can change it to their liking.
And red, thanks for the picture tips!
Vijay Krishna Ramesh,
Can’t tell what the problem is, but in general, you should never use inline event handlers, and especially not the
javascript:protocol. Please read more in AJAX, JavaScript and Accessibility.
August 29th, 2008 at 16:53
Works great in FF3 – having issues in IE6.
Getting an ‘Object doesnt support this property or method’ error on this line:
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,Any ideas on how I can circumvent this?
Thanks,
-=Patrick=-
August 29th, 2008 at 21:00
Patrick,
First, that line should never be executed, since it checks for native support for
document.getElementsByClassNamein the web browser, which certainly doesn’t exist in IE 6.I’m guessing that you have probably already extended the document in some way, and that that triggers the error. If I take the
getElementsByClassNamecode here and try it out in a clean page in IE 6 and IE 7 I get no errors.Please try that as well and see if the problem persists.
September 5th, 2008 at 3:06
Robert,
First off, like the new site design!
Secondly, so I am having an issue here with the getElementsByClassName with only IE7 (havn’t tested with IE6); IE7 reports (with debugging enabled) that “Microsoft JScript runtime error: Object doesn’t support this property or method” and highlights the
var classes = className.split(" "),line that occurs in the lastelsestatement. This baffles me cause I usegetElementsByClassNamein another function within the same script and it runs without any errors. Can this function only be used once per page/script?September 5th, 2008 at 8:49
Mazza,
Thanks!
Hmm, sounds weird. Please post a link to an example, or e-mail me, and I’ll let you know if I see something weird.
September 15th, 2008 at 21:35
Thanks! This cut my script time from ~25 seconds to ~6.
September 15th, 2008 at 21:47
Tom,
Great!
September 22nd, 2008 at 21:31
I love this function! Am I correct to conclude that if elem is specified, and tag isn’t we should pass “” or null for tag instead of the old “*”? I noticed that I was running into a invalid regExp error in FF3 with tag = “*” (nodeName = (tag)? new RegExp(“\\b” + tag + “\\b”, “i”) : null,) since tag was evaluating as true — sorry it wasn’t too clear to me in the current documentation since I was use to using “*” with your previous version.
Thanks again for the function!
September 22nd, 2008 at 22:25
Lori,
I’m glad that you like it!
Actually, it’s a minor flaw which was recently brought to my notice.
"*"won’t work, like you say, just pass innullto be completely safe. Like this:getElementsByClassName("desired-class", null, document.body);I’ll fix this in the next release.
September 28th, 2008 at 15:08
[...] agora, Robert Nyman a melhorou adicionando novas [...]
October 1st, 2008 at 21:00
Hey Robert,
As a follow-up to my post and our email correspondence, I looked more into the issue and I found out the root of the problem is that I am using your code on MediaWiki 1.11… looks like the folks of MediaWiki integrated either an old version or a hacked version of your getElementsByClassName into their wikibits.js file
Figured I would post this as a comment instead of email for anyone else that may think about adding this to their MediaWiki!
October 1st, 2008 at 21:11
Mazza,
Interesting. Hopefully MediaWiki will update their code. If not, please alert them.
October 17th, 2008 at 15:42
Robert: thanks for this. It saved us from a sticky problem brought on by confused user requirements…
Turtle
November 8th, 2008 at 11:55
Hi Robert,
i’m using your fabulous script but am getting the same error like Mazza on IE7 when calling it like this:
function hideall(){
var boxnr = 0;
submenuboxes = getElementsByClassName(document, 'navigator');
while (submenuboxes[boxnr]){
submenuboxes[boxnr].style.display = 'none';
boxnr++;
}
}
I’m hiding all div-containers with the class ‘navigator’ via onfocus-eventhandling and then view the active submenu-divcontainer ([...] onfocus=”hideall(); displayactivebox(‘id’, ‘block’)”[...])
This works on all browsers except IE7, you got any idea to help me through this problem?
The submenus are neccessary, you know?
November 10th, 2008 at 20:02
Nightfalcon,
You’re specifying the parameters in the wrong order. The first one should be classname, the second tag name (optional) and the third parent element (optional). Like this:
getElementsByClassName('navigator', null, document);November 11th, 2008 at 20:01
[...] it natively, you will need a wrapper script. There are many such scripts; I myself am partial to Robert Nyman’s Ultimate GetElementsByClassName. It uses the native getElementsByClassName() method in modern browsers that support it, then falls [...]
November 20th, 2008 at 22:00
[...] however, native support for that doesn’t exist in all web browsers, Therefore I recommend the getElementsByClassName function, which also supports some other nifty features not available in any native web browser [...]
December 14th, 2008 at 0:27
[...] The Ultimate GetElementsByClassName — Déjà évoquée ici, cette superbe fonction qui sélectionne les éléments par leur classe CSS a été mise à jour récemment. [...]
December 19th, 2008 at 16:09
Robert,
I wanted to take advantage of some Firefox 3 features in our client, including the native `getElementsByClassName`. All was well and good, until our testers discovered some critical problems with Firefox 3, so we needed to step back to Firefox 2 (unfortunately). I still needed the gEBCN functionality, though, but I quickly discovered your implementation, dropped it in place, and it worked without any problems. This saved me a lot of time and energy. Thanks!
December 19th, 2008 at 16:29
John,
Great to hear, I’m glad it helped you!
December 23rd, 2008 at 6:00
[...] access, however, native support for that doesn’t exist in all web browsers, Therefore I recommend the getElementsByClassName function, which also supports some other nifty features not available in any native web browser [...]
December 29th, 2008 at 14:27
Rob, Script works great but I have a question. I have the function in the head with a link to pass the classname variable, but the link has to be clicked twice. The second click displays hidden items and then afterwards it works by clicking once.
function toggle_visibility(className) {
var e = getElementsByClassName(className, “div”, document);
for (var i = 0, len = e.length; i < len; ++i) {
if (e[i].style.display == ‘none’) {
e[i].style.display = ‘block’;
}
else {
e[i].style.display = ‘none’;
}
}
}
+ more
December 29th, 2008 at 20:30
Andrew,
Thanks.
Your problem seems to rather stem from the fact that your element doesn’t have the style applied that you think; i.e. an element can be hidden from an external style sheet, but that doesn’t set its
style.displayproperty to “none”.You can read more in Get the rendered style of an element.
So, you can either go down that windy road, or just work with classNames all the way through, i.e. one for block display and one for none.
Good luck!
December 29th, 2008 at 23:45
Thanks for the response Robert. You are correct, I am using nested repeaters that set an external style to all elements after a set number and then the function shows or hides the rest of the list for the designated catagory.
If I want to just use the classnames all the way through how do I designate one for block and one for none? or would it just be easier to set inline styles on the repeater items?
Thanks again.
December 30th, 2008 at 13:41
Andrew,
Basically, just have something like this in your CSS:
.display-block {display: block;
}
.display-none {display: none;
}
and then apply it accordingly in your code.
December 30th, 2008 at 16:48
[...] klasy getElementsByClassName mo?esz skorzysta? zagl?daj?c na stron? Robert-a Nyman-a, natomiast pozosta?e [...]
January 26th, 2009 at 16:05
hmm it won’t work in IE7
No problem in Firefox or Opera
I included the JS file that way :
..and started to write my scripts as usual
function etc…
Any idea where i’m wrong ?
January 26th, 2009 at 16:15
oops.
So, that way : <script type=”text/javascript” src=”getElementsByClassName.js”></script>
(btw that “preview comment” stuff is amazing, how you do that ? Ajax ?)
January 26th, 2009 at 17:11
Tetsuoo,
With the above code in the post, the functionality should be working.
The comment preview is not AJAX, just a script that detects your keyboard input and puts the content in a preview element.
January 27th, 2009 at 16:17
Hey thanks for the quick answer
Well i’m back to say it’s still not working ^^;
I put a sample here : http://tetsuoo1.free.fr/bouffe/sample.php
I used getElementsByclass to be able to check/uncheck every checkboxes ( try the “all / none” toggle).
There is other ways to do that but i already used getElementById for something else and… it look more logical with your method, as an ID is supposed to be unique.
ok, so you can see in the source code :
function checkAll()
{
c = document.getElementsByClassName(‘cbx’);
for (i = 0; i < c.length; i++) {
c[i].checked = true;
}
}
function uncheckAll()
{
c = document.getElementsByClassName(‘cbx’);
for (i = 0; i < c.length; i++) {
c[i].checked = false;
}
}
And the checkboxes look like this :
<input type=”checkbox” class=”cbx” id=”cbx80″ name=”cbx[]” value=”80″>
It works nice in Firefox or Opera.
IE 7 don’t like it, it’s not recognized (error : “this object can’t use this property or method” )
January 27th, 2009 at 17:09
Tetsuoo,
You should use
getElementsByClassNameonly, notdocument.getElementsByClassName.Why it works in any other web browser but IE is that they have native support for a
getElementsByClassNamemethod. This code, however, is just a stand-alone function which should not be called as a method of thedocumentobject.January 27th, 2009 at 19:19
ok, i tried :
c = getElementsByClassName(‘cbx’); —-> not working
then :
c = getElementsByClassName(document,’input’,'cbx’); —-> WORKS !!
phew.
Thanks again for your support
(now maybe i’ll try on Safari…haha no i’m joking;))
January 27th, 2009 at 20:24
Tetsuoo,
Great!
February 1st, 2009 at 6:49
Hi Robert,
I’ll be a little off topic
After the tiny struggle with your class/function, i wanted to come back one day and say Hey i found out how you made your html Preview trick !
Well it was easier than expected, and it works !! (almost)
No Ajax involved, you were right, i’m discovering only now how much powerful JS is (after years of lazyness HTML coding and little PHP – what a shame, yeah i know)
I just did this, with a simple onKeyUp event :
)
function previewText()
{
var txt = document.form0.AreaText.value;
document.getElementById(‘preview’).innerHTML = txt;
document.getElementById(‘preview’).style.color=’#36F’;
}
..and that’s all folks ! (cartoon ending)
Almost. Maybe i’ll just STEAL some of your regex for replacing the smileys and all, because i HATE regex. Really. Regex are just not for “normal” human beings.
So, thanks for giving me ideas, even when you don’t want to (hehe
February 2nd, 2009 at 10:36
Tetsuoo,
Glad you got it to work!
However, in terms of regular expressions and its different syntax, I would really recommend learning.
I did a number of years ago, and no mater what technology I’ve worked with, knowing reg exps has been invaluable!
February 9th, 2009 at 21:05
[...] The ultimate getElementsByClassName, anno 2008 – Robert’s talk – Web development and Internet tren… (tags: http://www.robertnyman.com 2009 mes1 dia9 getElementsByClassName JavaScript function) [...]
February 17th, 2009 at 13:10
[...] http://www.robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/ [...]
February 18th, 2009 at 19:34
[...] Here’s the code [...]
March 5th, 2009 at 0:25
function getElementsByClassName(className, node)
{
var children = null, returnArr = [], i;
var regexp = new RegExp(“(^|\\s)”+ className +”(\\s|$)”, “g”);
if ( node == undefined ) node = document.body;
else if ( typeof node != “object” ) return([]);
else if ( regexp.test(node.className) )
returnArr[returnArr.length] = node;
children = node.childNodes;
for (i = 0; i < children.length; i++)
{
returnArr = returnArr.concat(
getElementsByClassName( className, children[i] )
);
}
return(returnArr);
}
March 30th, 2009 at 17:13
Hey Robert,
Never mind on my problems with IE7, I fixed them using the help you gave Tetsuoo. Again, thanks, for the great tool!
March 30th, 2009 at 17:18
Hmm, just noticed that my original post didn’t show up. To summarize, I wasn’t getting the script working in ie7, but it was due to the same issue of using var foo = document.getElementsByClassName(“bar”) instead of using the stand alone var foo = getElementsByClassName(“bar”) call. (Same as Tetsuoo)
-Ben
March 31st, 2009 at 10:10
real.code,
You will get a much better performance by utilizing native support.
birey,
Oh, well, good to hear that it worked out at least!
April 15th, 2009 at 10:18
great implementation, helped me easily bypass the annoying IE.
thanks!
May 1st, 2009 at 3:11
[...] getElementsByClassName()??Firefox 3, Opera 9.5, Safari 3.1, Google Chrome?????????????????????IE???????????????getElementsByClassName()?????????????????????????????????????????????Robert Nyman?????????????????????????????????getElementsByClassName??????????????????????? [...]
May 7th, 2009 at 17:58
Huge thanks man!!
You saved me a lot of work!
Why Microsoft hates us all??
May 7th, 2009 at 18:03
Brent,
You’re welcome!
quique,
Glad it helped. And yes, it’s a good question.
May 11th, 2009 at 5:18
Hi Robert,
This script is just what I was looking for, but i’m not sure I am implimenting it in the right way.
I am calling your function in the following way:
function changeFontOne () {
var oDivNormal = getElementsByClassName(‘websiteNormal’);
oDivNormal.style.fontFamily = “Times New Roman, Times, serif”;
oDivNormal.style.fontSize = “11px”;
oDivNormal.style.fontStyle = “italic”;
}
But it does not seam to be working.
I just want to be able to change the style depending on specific class names. I had it working no problems using getElementById but it would be much more flexible and powerful if I could change the style based on class names.
Any direction would be appricated.
Marney
May 11th, 2009 at 10:08
Marney,
It is because the function returns an array, not an element reference. It does that since it can be one or several matches. To alter the matching elements, loop through them and do what you want to do. In your case:
function changeFontOne () {
// Get a reference to all mathcing elements
oDivNormalArray = getElementsByClassName(“websiteNormal”);
// Loop through each of them and do what you want to do
oDivNormal = oDivNormalArray[i];
for (var i=0, il=oDivNormalArray.length, oDivNormal; i
oDivNormal.style.fontFamily = “Times New Roman, Times, serif”;
oDivNormal.style.fontSize = “11px”;
oDivNormal.style.fontStyle = “italic”;
}
}
May 16th, 2009 at 18:54
[...] [upmod] [downmod] The ultimate getElementsByClassName, anno 2008 – Robert’s talk – Web development and Internet tren… (robertnyman.com) 0 points posted 6 months, 4 weeks ago by trshant tags 4mdelicious [...]
June 4th, 2009 at 1:09
[...] developed a few different ways to get the elements they want, including custom functions – like Robert Nyman’s getElementsByClassname – which take advantage of local browser support, but you’re still forced to account for those [...]
July 10th, 2009 at 22:57
very cool!!
August 3rd, 2009 at 5:39
[...] The Ultimate GetElementsByClassName — Déjà évoquée ici, cette superbe fonction qui sélectionne les éléments par leur classe CSS a été mise à jour récemment. [...]
August 20th, 2009 at 4:23
Using a 3rd parameter doesn’t work in IE8:
Error: “Object doesn’t support this property or method”
The exception to this is if the 3rd param is just document.
var items = getElementsByClassName(“extra-content-1″, “span”, this);
where ^this^ is a DOM element (containing div), i’ve also tried passing in: document.getElementById(this.id) as the 3rd param; no difference.
Works fine in safari, opera, ff…
August 20th, 2009 at 5:37
nevermind, it was the method by which I procured the IE DOM element… a little bit of extra testing with element.getElementsByTagName() revealed this.
August 20th, 2009 at 10:39
Lùcaz,
Thank you!
Daniel,
Glad it worked out for you!
September 3rd, 2009 at 11:21
Hello Mr.Robert ,
I am just a beginner to JS . I have created a table in which there are onmouse() event handlers . This works fine in FF but doesnot work in IE . On searching I came to know that we have use this custom script . Can u please explain me how to use it .
September 10th, 2009 at 3:39
Like Patrick (another Patrick) above, watch out for a conflict with JavaScript frameworks (i.e. web widgets in uncertain environments).
For example, since the Prototype framework attaches getElementsByClassName to the core Object and returns an Array instead of the expected NodeList, Robert’s function will cause IE and older browsers to error.
To work around this conflict, you can check to make sure that the getElementsByClassName function, if it exists, is indeed native:
if (document.getElementsByClassName && Object.prototype.getElementsByClassName === document.getElementsByClassName)Note that they have thankfully depreciated the function in Prototype.
September 10th, 2009 at 9:41
sameer,
You probably call the function like this the:
document.getElementsByClassName, which is incorrect.It should be called like this:
getElementsByClassNamePat,
Good point. It was really annoying that Prototype hooked into real objects with a method name that was about to be standardized. Gladly, though, they have now moved on.
September 22nd, 2009 at 10:49
[...] hadn’t checked the statistics for some time for my getElementsByClassName code, so you can just guess my surprise when I saw it has passed one million [...]
September 25th, 2009 at 9:50
[...] getElementsByClassName() ??Firefox 3, Opera 9.5, Safari 3.1, Google Chrome ?????????????????????IE ???????????????getElementsByClassName() ?????????????????????????????????????????????Robert Nyman ????????????????????????????????? getElementsByClassName ??????????????????????? [...]
October 5th, 2009 at 15:30
Hi,
I think there’s something wrong with the native fast path (first block)?.
First, all other paths do a
tag = tag || "*";initially and also, if actually passing a ‘*’ as tag Firefox 3.5 complains about invalid regexp (“*\b”). Should it use empty string instead of ‘*’?October 5th, 2009 at 16:28
Fredrik,
Yes, some browsers could complain on that, and the recommended way is to send in an empty string,
nullorfalse.October 5th, 2009 at 18:57
ok, thanks.
) is that is is symmetric with regards to tag or class being null/optional. (i.e it has an explicit getElementsByTagName path).
Not sure if you rate this snippet as a library component? In that case if would be nice to automatically add the ‘*’->null conversion.
–
Currently tag name is obviously optional, but personally I quite often need both tag- and class-name in various combinations. That pattern is present in MochiKit as getElementsByTagAndClassName() http://mochikit.com/doc/html/MochiKit/DOM.html#fn-getelementsbytagandclassname
Difference with youe code (apart from speed
Perhaps that would be a case worth exploring performance profiles for also?
(yes, I guess I should rather use a proper selector engine..)
October 5th, 2009 at 21:27
Fredrik,
It’s a valid question, but generally I see this as a fast stand-alone and consistent
getElementsByClassNameacross web browsers.For more advanced usage I’d probably recommend a selector engine as well.
November 17th, 2009 at 0:50
[...] the their class names instead. Please read the creator’s page for proper usage instructions. Original Source – check for terms of [...]
December 8th, 2009 at 7:24
[...] dans les navigateurs. Pour y remédier, je recommande l’utilisation de la fonction getElementsByClassName qui contient par ailleurs quelques fonctionnalités [...]
December 9th, 2009 at 17:35
Having some trouble with this and IE8.
The statement “if (document.getElementsByClassName) {” is true on IE8 but still, the function is not supported resulting on execution stopping sharp.
Am I missing something?
December 9th, 2009 at 17:39
Ahhh, Pat @ September 10th, 2009 at 3:39 had the key, the fix suggested works like a charm (prototype conflict)
Thanks !!!
December 9th, 2009 at 18:54
Luis,
Glad it works for you!
December 16th, 2009 at 11:02
[...] les éléments qui partagent une ou plusieurs classes. C’est là qu’intervient The Ultimate GetElementsByClassName déjà évoqué dans Utillisez le DOM et Javascript comme un chef pour redéfinir le comportement [...]
December 28th, 2009 at 18:07
i wanna change lastPostUser
<span class="lastPostUser" …
when i use
document.getElementsByClassName("lastPostUser").className = "catLink";
it didnt work.. why? help me
December 29th, 2009 at 21:21
mighty_child,
You just call it with
getElementsByClassName("lastPostUser"), NOT having the worddocumentbefore it.December 30th, 2009 at 18:43
i am using this for tabs , and need a bit help
here is the code i am using
tab1
tab1 content
Click Here to go tab2
tab2
tab2 contents
on clicking, "Click Here to go tab2" user can go to next tab,
is it possible to make user go to another tab ( div id="2" )editing onclick="click(this);"
January 2nd, 2010 at 21:48
Pritush,
Yes, you could easily use
getElementsByClassNameto do something like that. Also, if you use a JavaScript library, e.g. jQuery, there are a number of already existing tab plugins.February 23rd, 2010 at 10:45
can you fix with IE ?
thanks
February 23rd, 2010 at 16:10
Toan,
It works fine in IE. Please make sure to call it with
getElementsByClassName, i.e. not preceded by document.March 1st, 2010 at 11:24
Hi!
I try to use this function in next way:
I have div with class tab_13
I type
getElementsByClassName("tab_13").className="lighted";but class doesn’t change..
then when I type
alert (getElementsByClassName("tab_13"));I get [object HTMLDivElement]
It seems that I go wrong somewhere… But where?
Thanks for the answers!
March 1st, 2010 at 11:36
Zu,
The function returns an an array. If you get multiple elements back, you need to loop over them; if you just want to change the first, write
getElementsByClassName("tab_13")[0].className="lighted";April 7th, 2010 at 12:52
??, ??? ? ?? ??????? ???????. ??? ?? ???????? ?????????. ???????, ??? ? ??????!
April 16th, 2010 at 0:30
Thank you! your code here helped me a lot in getting a difficult project (at least for my novice level) done.
for some reason, even in Firefox, document.get—- wasn’t working, but your function made it work flawlessly.
April 16th, 2010 at 9:37
Amit,
Glad it was of help to you!
April 22nd, 2010 at 16:06
something really really useful to my project. thanks! it works beautifully!
April 22nd, 2010 at 16:35
Hugo,
Glad you like it!
May 26th, 2010 at 18:49
I think ‘thank you’ will be little for this great job
i love it
for (i = 0; i <= 1000000000000000000; i++)
{
document.write("Thank You!");
}
May 27th, 2010 at 10:09
Abdulrahman,
Thank you!
June 15th, 2010 at 18:32
Hi Robert
I’m very new to javascript and your code helped me a lot in a little project of my own. It’s awesome!
One thing though, I can get it to work using
getElementsByClassName(“class”)
but what about when I want do something like:
document.getElementById(“tableContainer”).getElementsByClassName(“class”)
since I have “class” elements both inside and outside of the tableContainer div, but just want to get ahold of the ones inside.
I appreciate your help
keep it up man!
June 16th, 2010 at 0:33
Javier,
Thanks!
If you want to look within a certain element, you need to specify it as the third parameter, i.e:
getElementsByClassName(“class”, “*”, document.getElementById(“tableContainer”));
The * character could be replaced by a certain tag name; for instance, if you want all the div elements, just replace the * with div.
June 16th, 2010 at 16:38
works flawlessly!
you’re the man!
thanx again!
June 16th, 2010 at 21:27
Javier,
Good!
June 29th, 2010 at 23:46
Thanks for the code; it saved me a lot of trouble today (I forgot to check my code on Internet Explorer, which was a big, public, mistake).
If I had written it, I would probably have organized it like this:
var getElementsByClassName = function (className, tag, elm){
var g;
if (document.getElementsByClassName) {
g = function (className, tag, elm) {
….
}
else if (document.evaluate) {
g = function (className, tag, elm) {
….
}
else {
g = function (className, tag, elm) {
….
}
}
return g;
}();
That way, you only have to go through the browser-capability selection once, when the function is defined.
But this code is excellent and very helpful. Thanks again!
Ed.
July 2nd, 2010 at 1:35
This is brilliant code, thank you so much for sharing it!
I’ve been attempting to implement a very similar function to one that was posted earlier, and I’ve been trying to execute the loop you gave that commenter but I think I must be doing something wrong (maybe a syntax issue since I’m not very familiar with Javascript):
function changeTextStyle() {elementArray = document.getElementsByClassName("hasevents");
for(var i=0, i=elementArray.length; eventsElement; i) {
eventsElement = elementArray[i];
eventsElement.style.fontFamily = "Times New Roman, Times, serif";
}
}
July 2nd, 2010 at 3:47
You can disregard/delete the last post, I got the loop to work.
Now I’m having issues accessing “a” tags. I can access any other tag it seems but that one.
var elementArray;
function changeTextStyle() {
elementArray = document.getElementsByClassName("hasevents", "a");
for (var i=0; i<elementArray.length; i++ ) {
elementArray[i].style.color = colorvalue;
}
}
#######
<div class="hasevents"><a href="#">Hello</a></div>
It changes the color as long as the “a” tag has no “href” following it, but once I put the link in it doesn’t change the link color. Any thoughts you could give I’d be grateful for.
Write a comment
Twitter reactions