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.

Improve this question
7
  • 1
    Check out jQuery at jquery.com -- with it, it's just as simple as $('span.galleria-current') Commented Jun 4, 2012 at 18:50
  • @Niko For one line? Hardly necessary. Commented Jun 4, 2012 at 18:50
  • 2
    @Niko, This question is not tagged jQuery, the OP is asking for a javascript solution. Commented Jun 4, 2012 at 18:50
  • @Jivings Hardly necessary for this task, yes - but probably helpful in the future. Commented 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. Commented Jun 4, 2012 at 18:54

2 Answers 2

Reset to default
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]

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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.
This is not a cross browser solution.
Except that IE8 doesn't support getElementsByClassName.
Comments are correct. This solution is not valid for older browser implementations.
IE 9 does support this function.
|
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; }
Improve this answer

1 Comment

I like this one since you can't accidentally get some "non span" that happens to have the class you're looking for...

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.