This works much like getElementById but it lets you get all HTML elements which have been given the class name.  As there will be more than one the result is an array.  To do anything with those elements you need to say which one you want to change.  The easiest way to do that is to use a for loop

Create a new page with no code in it called classes.html.  Put this in it as an example of a page with classes, CSS and JavaScript:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title></title>  	    
  	                
    <style type="text/css">
        .emphasised {
            color:red;
        }			
			  
    </style>
    <script type="text/javascript">
    	function changeEmphasis() {
	    var elementsToChange=document.getElementsByClassName('emphasised');
	    		
	    for(var i=0;i<elementsToChange.length;i++){
                elementsToChange[i].style.color='yellow';
	    }
	    		
        }
    </script>
    </head>	
    <body>
        <h1>A page of important things</h1>
		
	<p>These are words which are not important <span class="emphasised">but</span> some words might be.</p>
		
	<p class="emphasised">This whole paragraph seems to be important</p>
		
	<h2 class="emphasised">This heading is special</h2>
		
	<p>This paragraph is boring.</p>
		
	<p onmouseup="changeEmphasis();">Click me to change the colours.</p>
		
    </body>
</html>

Try it and you should see what it does:

  1. the CSS styles certain things red using a class
  2. the JavaScript gets a list of all the things with that class and saves it in the variable
  3. the for loop runs through that list changing each one in turn

The list of elements which share the class name is actually an object similar to an array.  Therefore you can change the properties of that object and it's child objects as you do here.