10

Is getElementByClass safe to use across browsers like getElementById?

Update Currently using:

 window.opener.document.getElementById

But I want to reference the object by classname (there will be only 1 element with that classname).

1
  • 1
    If there is only one it would be more efficient to access it by ID because searching through the DOM for a specific class is not ideal but if you must i would recommend a framework like jQuery
    – xenon
    Commented May 22, 2009 at 23:30

5 Answers 5

9

getElementsByClassName is unfortunately not reliable cross-browser. It's currently supported by the most recent versions of Firefox, Opera, Safari, and Chrome, but not at all in Internet Explorer or Konqueror, according to Quirksmode.

If you want to use it cross-browser, you'll have to have to provide your own implementation for those browsers that don't support it, like in PPK's blog:

function getElementsByClassName(node,classname) {
    if (node.getElementsByClassName)
        return node.getElementsByClassName(classname);
    else {
        // your custom function
    }
}
1
  • 1
    There has been a lot of work done by others on "// your custom function" already, so don't feel like you need to do it yourself. One specific example would be SizzleJS: sizzlejs.com Commented Sep 20, 2011 at 5:30
2

As as been mentioned by others, getElementsByClassName is not available in Internet Explorer.

See the Customizing the DOM section of Document Object Model Prototypes, Part 1: Introduction for information on how to implement the functionality in IE.

1
  • It looks like this only works with IE8. You can't extend Element.prototype or HTMLDocument.prototype in IE6 (or, I believe, 7).
    – Ben Blank
    Commented May 22, 2009 at 23:26
2

IIRC, getElementsByClassName was introduced in Firefox 3, Safari 3.1, and has been in Chrome since the beginning. I don't know if/when it was added to Opera, but it isn't present in Internet Explorer at all. (Though it can be added to IE8 by extending the DOM prototypes; see Grant's answer.)

In other words, if you want a cross-browser getElementsByClassName, you'll either need to roll your own or use a framework.

3
  • Safari and Chrome both use WebKit as HTML rendering engine.
    – Gumbo
    Commented May 22, 2009 at 21:57
  • 2
    That's true but they use different Javascript engines.
    – mishac
    Commented May 22, 2009 at 22:18
  • 1
    @Gumbo — Sure, but what's that got to do with the price of tea in China? :-)
    – Ben Blank
    Commented May 22, 2009 at 22:45
1

If you really want to use it, you could test to verify if the object supports getElementsByClassname prior to using it and fall back to a JS implementation of the function if the browser doesn't support it.

1

I would suggest using a wrapper library like prototype.js or jQuery, which both support a css selector model, and handle browser compatibility issues (IE6-7 being the bigger issues usually)

1
  • if it's loaded into the opener... window.opener.$('...') works ;)
    – Tracker1
    Commented May 28, 2009 at 2:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.