CODEWITHSUNDEEP
javascriptinternet-explorer-8internet-explorer-7internet-explorer-6dom-traversal
124697
124697

Reputation: 21893

getElementsByClassName() doesn't work in old Internet Explorers like IE6, IE7, IE8

The following code:

var borderTds = document.getElementsByClassName('leftborder');

gives me an error message in Internet Explorer 6, 7 and 8:

Object does not support this method

How can I select elements by their class in these browsers?

I prefer not to use JQuery.

Upvotes: 17

Views: 40854

Answers (5)

user1214683
user1214683

Reputation: 9

If getElementsByClassname does not support is error in some old browsers Simply try var modal = document.getElementById('myModal'); modal.onclick= function(){ Then do what ever onclick function or another function by using getElementById modal.style.display = "none"; }

Upvotes: -2

Andrei
Andrei

Reputation: 56688

This solution may help. This is a custom getElementsByClassName function implemented in pure javascript, that works in IE.

Essentially what this script is doing is probing, one by one, all possible options and picks the best one available. These options are:

  1. Native document.getElementsByClassName function.
  2. document.evaluate function, which allows evaluation of XPath queries.
  3. Traversing the DOM tree.

Of course the first one is the best performance-wise, however the latter should be available everywhere including IE 6.

Usage example, which is also available on the page, looks like this:

getElementsByClassName("col", "div", document.getElementById("container"));

So the function allows 3 parameters: class (required), tag name (optional, searches for all tags if not specified), root element (optional, document if not specified).

Update. The solution linked in the blog post is hosted on the Google Code which is shutting down in Jan 2016. However the author has made it available on GitHub. Kudos to flodin pointing this out in the comments.

Upvotes: 13

kapa
kapa

Reputation: 78671

Internet Explorer 8 and older does not support getElementsByClassName(). If you only need a solution for IE8, it supports querySelectorAll(), you can use one of these instead. For older IEs you have to provide your own implementation, and for some other ancient browsers that support it you can also use evaluate() which runs XPath expressions.

This code provides a document.getElementsByClassName method if it does not exist yet using the methods I've described:

if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

If you don't like something about it, you can use your favorite search engine to find a different one.

Upvotes: 7

Peter
Peter

Reputation: 27944

IE6, Netscape 6+, Firefox, and Opera 7+ copy the following script in your page:

document.getElementsByClassName = function(cl) {
  var retnode = [];
  var elem = this.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i++) {
    if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode.push(elem[i]);
  }
  return retnode;
};

Upvotes: 16

Guffa
Guffa

Reputation: 700322

The method doesn't exist in IE6. If you want to select elements by class and don't want to use a library, you simply have to loop through all elements in the page and check for the class in their className property.

function getElementsByClassName(className) {
  var found = [];
  var elements = document.getElementsByTagName("*");
  for (var i = 0; i < elements.length; i++) {
    var names = elements[i].className.split(' ');
    for (var j = 0; j < names.length; j++) {
      if (names[j] == className) found.push(elements[i]);
    }
  }
  return found;
}

Demo: http://jsfiddle.net/kYdex/1/

Upvotes: 6

Related Questions