Free, tested & ready to use examples!
AnyExample.com
 
Web anyexample.com
 

JavaScript getElementsByClass function

abstract 
Modern JavaScript implementations has DOM functions getElementById and getElementsByTagName. However there is no function which return list of elements by the given CSS class name. This article provide function getElementsByClass which do this.
compatible 
  • Internet Explorer 6.x, 7.x
  • Opera 8.x, 9.x
  • Mozilla Firefox
  • Apple Safari
  • other modern DOM-compatible browsers
  • Described function getElementsByClass has three arguments. Class name (first argument), DOM node (by default it's a document) and tag name (for selecting only <tag> elements with specific class). Last two arguments are optional.

    First, getElementsByClass function selects all tags (every tag '*' or tags with name 'tagName' specified by user). Afterwards, in for-loop our function checks if given class name is in the className property string. If it is, it copies found element to another array 'el' which is returned to user at the end of function.

    Here is getElementsByClass source code:

    source code: JavaScript
     
    function getElementsByClass( searchClass, domNode, tagName) { 
    	if (domNode == null) domNode = document;
    	if (tagName == null) tagName = '*';
    	var el = new Array();
    	var tags = domNode.getElementsByTagName(tagName);
    	var tcl = " "+searchClass+" ";
    	for(i=0,j=0; i<tags.length; i++) { 
    		var test = " " + tags[i].className + " ";
    		if (test.indexOf(tcl) != -1) 
    			el[j++] = tags[i];
    	} 
    	return el;
    } 
     

    We use tricks with surrounding searchClass and className with spaces, because className property may contain several classes separated by space, like "bold boldLink".

    As a simple example of using this function, there is trivial page with JavaScript-"tabs" (switching two DIV-elements with links):

    source code: HTML / JavaScript
     
    <html><head><title>getElementsByClass test page</title>
     
    <script type="text/javascript">
     
    // paste getElementsByClass function (see above) here 
     
    function showtab(tabname) 
    { 
    	// hide every element with class 'tab'  
    	var tabs = getElementsByClass('tab');
    	for(i=0; i<tabs.length; i++) 
    		tabs[i].style.display = 'none';
    	// hide every element with class 'tab'		 
     
    	document.getElementById(tabname).style.display='block';
    	// show element with given tabname 
    } 
    </script>
     
    <style type="text/css">
    /* We use several classes here to test getElementsByClass */ 
    div.tab {  width: 100px; height: 100px; border: 1px solid black; } 
    div.bgray { background-color: gray;} 
    </style>
     
    </head>
    <body>
     
    <a href="#" onclick="showtab('tab1');">tab1</a>, 
    <a href="#" onclick="showtab('tab2');">tab2</a>,
    <a href="#" onclick="showtab('tab3');">tab3</a>,
    <a href="#" onclick="showtab('tab4');">tab4</a>,
    <a href="#" onclick="showtab('tab5');">tab5</a>
     
     
    <div class="tab bgray" id="tab1">
    Tab1
    </div>
     
    <div class="tab bgray" id="tab2" style="display: none;">
    Tab2
    </div>
     
    <div class="tab bgray" id="tab3" style="display: none;">
    Tab3
    </div>
     
    <div class="tab bgray" id="tab4" style="display: none;">
    Tab4
    </div>
     
    <div class="tab bgray" id="tab5" style="display: none;">
    Tab5
    </div>
     
    </body></html>
     

    Alternatively, you can use compressed(by javascriptcompressor.com) version of getElementsByClass function(only 396 bytes):



    warning 
  • This is a function, not a class method. Do not use document.getElementsByClass('something'), use simply getElementsByClass('something')
  • tested 
  • Internet Explorer 6.0
  • Internet Explorer 7.0
  • Mozilla Firefox 2.0
  • Opera 9.10
  • Apple Safari 2.0.4
  •  


     
    © AnyExample 2010-2013
    License | Privacy | Contact