getElementsByClassName Deluxe Edition

Stuart Colville Aug 8, 2007

General

JavaScript does not provide a function for obtaining elements by class, only by id, name, and tag name. This snippet will accomplish that, and includes optional arguments with defaults and support for multiple classnames in any order. It works in IE, Firefox, Opera, Safari and IE Mac.

Notes

Created by: Stuart Colville
Web Site: http://muffinresearch.co.uk/
Posted: August 8, 2007

The function has three parameters:

strClass

string containing the class(es) that you are looking for

strTag (optional, defaults to ?*?)

An optional tag name to narrow the search to specific tags e.g. ?a? for links.

objContElm (optional, defaults to document)

An optional object container to search inside. Again this narrows the scope of the search

Examples can be seen here.

Complete instructions can be found on the Muffin Research Labs Web site.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: classNameDE.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Stuart Colville | http://muffinresearch.co.uk/ */
function getElementsByClassName(strClass, strTag, objContElm) {
  strTag = strTag || "*";
  objContElm = objContElm || document;
  var objColl = objContElm.getElementsByTagName(strTag);
  if (!objColl.length &&  strTag == "*" &&  objContElm.all) objColl = objContElm.all;
  var arr = new Array();
  var delim = strClass.indexOf('|') != -1  ? '|' : ' ';
  var arrClass = strClass.split(delim);
  for (var i = 0, j = objColl.length; i < j; i++) {
    var arrObjClass = objColl[i].className.split(' ');
    if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
    var c = 0;
    comparisonLoop:
    for (var k = 0, l = arrObjClass.length; k < l; k++) {
      for (var m = 0, n = arrClass.length; m < n; m++) {
        if (arrClass[m] == arrObjClass[k]) c++;
        if (( delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
          arr.push(objColl[i]);
          break comparisonLoop;
        }
      }
    }
  }
  return arr;
}

// To cover IE 5.0's lack of the push method
Array.prototype.push = function(value) {
  this[this.length] = value;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="classNameDE.js"></script>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details