Javascript - get span by the class?

Question

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.

Check out jQuery at http://jquery.com -- with it, it's just as simple as `$('span.galleria-current')` — Niko, Jun 04 '12 at 18:50
@Niko, This question is not tagged jQuery, the OP is asking for a javascript solution. — Gabe, Jun 04 '12 at 18:50
@Jivings Hardly necessary for this task, yes - but probably helpful in the future. — Niko, Jun 04 '12 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 04 '12 at 18:54
@Niko, there are tags for a reason. I never said jQuery wasn't javascript. I will tell you what is correct, and it's simply the OP asked for a pure javascript solution. You're also making an assumption the the OP can even make use of jQuery in their solution, which is wrong. — Gabe, Jun 04 '12 at 18:55
@Gabe Since the tag says "javascript", OP might probably be interested in something like jQuery - that's the only assumption I've made. And that's why I didn't post this as an answer, it's just a note saying "maybe you'd like to check this out". No idea what's the problem with that. — Niko, Jun 04 '12 at 19:30

score 16 · Accepted Answer · answered Jun 04 '12 at 18:50

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]

answered Jun 04 '12 at 18:50

Jivings

22,834
6
60
101

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](http://caniuse.com/#feat=getelementsbyclassname). +1 anyhow. – Surreal Dreams Jun 04 '12 at 18:51
This is not a cross browser solution. – Gabe Jun 04 '12 at 18:51
Except that IE8 doesn't support getElementsByClassName. – j08691 Jun 04 '12 at 18:52
Comments are correct. This solution is not valid for older browser implementations. – Jivings Jun 04 '12 at 18:52
This will work in Chrome/Firefox but IE does not support getElementsByClassName. – sachleen Jun 04 '12 at 18:52
1

IE 9 *does* support this function. – Surreal Dreams Jun 04 '12 at 18:53

score 4 · Answer 2 · edited Sep 20 '17 at 04:08

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;
}

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 '17 at 04:23

Javascript - get span by the class?

2 Answers2