How to get element by class name?

You are missing an s in your function name. getElementsByTagName returns a collection of elements, of elements, which you need to iterate over:

var elements = document.getElementsByClassName("classname");

for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = 'foo';
}

IE8 and below don't support getElementsByClassName, so you'll have to find a polyfill or use querySelectorAll (IE8).

I suggest you to use JQuery, where you can use directly CSS selectors (like .yourclass) to find all elements of a given class:

$('.yourclass').doWhatYouWant();

If you prefer not to use JQuery, you can use plain Javascript:

document.getElementsByClassName('my-fancy-class')

But be careful with IE8 incompatibility issue. As an alternative (slower but you can build more complex CSS selectors) you can use:

document.querySelector('.cssSelector')

Which will return one element responding to your CSS selector, or

document.querySelectorAll('.cssSelector')

Which will return multiple elements instead.

Related