Get Element by Class instead of Id

Question

I have a button called WatchMode.

When you click this button, it will close certain divs, specified by the div ID.

The javascript for this is as follows:

function watchmode() { 
document.getElementById('aps30').innerHTML = " ";
} 

Now, I want to do the same for a div that appears twice on my page, this div has a Class instead of an ID.

I tried adding this line to the javascript, but it doesn't seem to work

document.getElementByClassName('floater').innerHTML = " ";

Any suggestions ??

Answer 1

You have to change a number of things:

1. Fix the spelling mistake in getElementsByClassName
2. Treat the return results of that function call as an array
3. Loop through the contents of the returned array in order to operate on the results
4. Understand that not all old browsers (no version of IE before IE9) support this function so if you want to target older browsers, you may have to check for its existence and use a substitute implementation if it isn't natively available. You can see the browser support here and see the alternate implementations in the link in Justin's answer.

Here's the code:

var divs = document.getElementsByClassName('floater');
for (var i = 0; i < divs.length; i++) {
    divs[i].innerHTML = " ";
}

This is a place where jQuery is really useful. In jQuery, it would just be:

$(".floater").html(" ");

That would automatically find all objects with that class and set the innerHTML of all matching objects to your string.

Answer 2

The easiest way to do this is to use jQuery. Here is a post that should answer your question:

How to getElementByClass instead of GetElementById with Javascript?

Answer 3

Your function name has a spelling mistake — it should be getElementsByClassName (note the plural, elements, not element):

document.getElementsByClassName('floater').innerHTML = " ";

Answer 4

First, I am not sure whether this was a typo or not, but you put:

document.get**Element**ByClassName('floater').innerHTML = " ";

The command is actually:

document.get**Elements**ByClassName();

notice elements is plural.

Now, this doesn't behave the same as getElementById. It returns a nodelist, or in other words a list of all the elements with the specified class.

You can store the results in an array like so:

var array_name = document.getElementsByClassName('floater');

and then loop through the results to perform your actions:

for ( var i=0, var len=array_name.length; i<len; ++i ){
    array_name[i].innerHtml = 'text';
}

I have not tested the code that I wrote out here, but the method is tried and true.

[edit] I forgot to mention that this function is not supported by IE, and you can accomplish this using jQuery by doing something like: $('floater').html('text'); and it is cross-browser. You can also search the web for something that emulates the behavior of getElementsByClassName and works in all browsers.

Here is an article with a better function that emulates getElementsByClassName:

http://www.webmuse.co.uk/blog/custom-getelementsbyclassname-function-for-all-browsers/

document.getElementsByClassName = function( classname ) {
    var elArray = [];
    var tmp = document.getElementsByTagName("*");
    var regex = new RegExp("(^|\s)" + classname + "(\s|$)");
    for ( var i = 0; i < tmp.length; i++ ) {

        if ( regex.test(tmp[i].className) ) {
            elArray.push(tmp[i]);
        }
    }

    return elArray;
;

This works very well, is cross browser compatible, and is used the same way as getElementsByClassName.

usage example from the article: var el = document.getElementsByClassName("para");

    for ( var i = 0; i < el.length; i++ ) {
        el[i].style.color = "red";
    }