Select elements by class name
getElementsByClassName - a fast way of selecting DOM elements by class name in modern browsers. Does not work in IE 8 and below.
getElementsByClassName() method returns a collection of elements with the given class name as a NodeList. It is supported in modern browsers. Internet Explorer has support for this method as of version 9. Example:
var list = document.getElementsByClassName('foo');
// get the number of selected elements
// iterate over elements and output their HTML content
for (var i=0; i<list.length; i++)
getElementById(), it's also possible to select elements by class name within another container:
var container = document.getElementById('header');
var list = container.getElementsByClassName('foo');
Warning: Watch out for the pitfall when looping through elements selected by class name and - at the same time - modifying the class attribute.
The method is fast, but due to the limitation of selecting elements only by class name, its usefulness is limited.
querySelectorAll() is a convenient method for accessing DOM elements by almost arbitrary CSS selectors.