3

Possible Duplicate:
How to Get Element By Class in JavaScript?

I need to get the text from inside of a span. The span has no ID. It only has a class. There would only be one span with this class. Does anyone know how I can get this span element in javascript? Thanks!

<span class="galleria-current">1</span>

This is slightly different than How to Get Element By Class in JavaScript? which is asking the more generic "get an element with a class", in case there's an easier way for spans, plus that question is about replacing text, whereas I want to get the innerHTML in this case.

7
  • 1
    Check out jQuery at jquery.com -- with it, it's just as simple as $('span.galleria-current')
    – Niko
    Jun 4, 2012 at 18:50
  • @Niko For one line? Hardly necessary.
    – Jivings
    Jun 4, 2012 at 18:50
  • 2
    @Niko, This question is not tagged jQuery, the OP is asking for a javascript solution.
    – Gabe
    Jun 4, 2012 at 18:50
  • @Jivings Hardly necessary for this task, yes - but probably helpful in the future.
    – Niko
    Jun 4, 2012 at 18:54
  • @Gabe And jQuery is what? Right, JavaScript. Didn't say: Please don't tell me anything about such a beautiful library as jQuery.
    – Niko
    Jun 4, 2012 at 18:54

2 Answers 2

16

Yes, you can use document.getElementsByClassName().

This will return an Array of all the elements with that classname. So the first one could be accessed like this:

var span = document.getElementsByClassName("galleria-current")[0]

6
  • 1
    The only problem with this (and I was going to suggest the same thing) is that it's supported by every major browser on earth (good) except IE8 and down (bad). See whencaniuse. +1 anyhow. Jun 4, 2012 at 18:51
  • This is not a cross browser solution.
    – Gabe
    Jun 4, 2012 at 18:51
  • Except that IE8 doesn't support getElementsByClassName.
    – j08691
    Jun 4, 2012 at 18:52
  • Comments are correct. This solution is not valid for older browser implementations.
    – Jivings
    Jun 4, 2012 at 18:52
  • 1
    IE 9 does support this function. Jun 4, 2012 at 18:53
4
function getFirstSpanWithClass(cssClass) {
    var elements = document.getElementsByTagName('span');
    for (var i = 0; i < elements.length; i++) {
        if((' ' + elements[i].className + ' ').indexOf(' ' + cssClass + ' ') > -1) {
            return elements[i];
        }
    }
}

var span = getFirstSpanWithClass('galleria-current'); // should return your span element.
if (span){
    // in case there is a span on the page, write its innerHTML to console
    console.log(span.innerHTML);
}

And an example that will give you all of them:

function getSpansWithClass(cssClass) {
    var elements = document.getElementsByTagName('span');
    var out = [];
    for (var i = 0; i < elements.length; i++) {
        if((' ' + elements[i].className + ' ').indexOf(' ' + cssClass + ' ') > -1) {
            out.push(elements[i]);
        }
    }
    return out;
}
1
  • I like this one since you can't accidentally get some "non span" that happens to have the class you're looking for...
    – rogerdpack
    Sep 20, 2017 at 4:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.