getElementsByClassName & IE8: Object doesn't support this property or method

Question

I know "getElementsByClassName" is not support by IE8. Do you know what can I use instead? I am getting annoying by error

"Object doesn't support this property or method".

The HTML code is:

function sumar() {
var elems = document.getElementsByClassName('verdana14 toAdd');
var myLength = elems.length;
total = 0;
for (var i = 0; i < myLength; ++i) {
   if (elems[i].value!="") {
       total += parseInt(elems[i].value,10);
       }
    }

var promedio = total/myLength;
parseFloat(document.getElementById('promediocal').value = promedio.toFixed(2));
}

This the input text that calls the javascript function:

<input name='AE_EA_1_BIV_003_2' type='text' class='verdana14 toAdd' id='AE_EA_1_BIV_003_2' style='width:50px' onChange='sumar()'/>
<input name='AE_EA_1_BIV_003_3' type='text' class='verdana14 toAdd' id='AE_EA_1_BIV_003_3' style='width:50px' onChange='sumar()'/>
<input name='AE_EA_1_BIV_003_4' type='text' class='verdana14 toAdd' id='AE_EA_1_BIV_003_4' style='width:50px' onChange='sumar()'/>

jQuery has a great CSS selector implementation (which includes class name searches): http://jquery.com/ — Tim M., Mar 05 '12 at 15:15
I love jQuery too, and for something running IE8 it almost certainly wouldn't be prohibitive overhead, but for pure vanilla javascript querySelectorAll() is best answer, as long as namespaces are not in the picture. — Swanny, May 02 '13 at 05:28

Marat Tanalin · Answer 1 · 2018-03-11T16:50:44.053

63

Use document.querySelectorAll('.verdana14.toAdd').

See also my related blog post.

edited Mar 11 '18 at 16:50

answered Mar 05 '12 at 15:14

Marat Tanalin

13,927
1
36
52

1

This would offer the simplest solution, but you should have `querySelectorAll` to get multiple elements. – Mar 05 '12 at 15:29
1

Thanks, I've corrected my typo by replacing qs with qsA. – Marat Tanalin Mar 05 '12 at 15:40
I downloaded the jQuery and used document.querySelectorAll('.verdana14.toAdd'); – Jesus Ibarra Mar 07 '12 at 03:22
7

If you use native browser method (`document.querySelectorAll()`), you don't need jQuery to use it, and vice versa. – Marat Tanalin Mar 07 '12 at 10:56

score 15 · Answer 2 · edited Jun 20 '20 at 09:12

getElementsByClassName method is not supported by IE8.

You should use document.querySelectorAll('.classname') (works in IE8+) or a library that implements that functionality - like:

jQuery
Moo Tools
DOJO
YUI
Prototype

... Among others...

querySelectorAll support:

http://www.quirksmode.org/dom/w3c_core.html#t13

getElementsByClassName support:

http://www.quirksmode.org/dom/w3c_core.html#t11

Paul · Answer 3 · 2012-03-06T04:45:07.467

9

You could write your own. Something like:

function GEBCN(cn){
    if(document.getElementsByClassName) // Returns NodeList here
        return document.getElementsByClassName(cn);

    cn = cn.replace(/ *$/, '');

    if(document.querySelectorAll) // Returns NodeList here
        return document.querySelectorAll((' ' + cn).replace(/ +/g, '.'));

    cn = cn.replace(/^ */, '');

    var classes = cn.split(/ +/), clength = classes.length;
    var els = document.getElementsByTagName('*'), elength = els.length;
    var results = [];
    var i, j, match;

    for(i = 0; i < elength; i++){
        match = true;
        for(j = clength; j--;)
            if(!RegExp(' ' + classes[j] + ' ').test(' ' + els[i].className + ' '))
                match = false;
        if(match)
            results.push(els[i]);
    }

    // Returns Array here
    return results;
}

Will work pretty well, but you could write a faster one if you want to. Then you can just change:

document.getElementsByClassName('verdana14 toAdd');

To:

GEBCN('verdana14 toAdd');

edited Mar 06 '12 at 04:45

answered Mar 05 '12 at 15:14

Paul

139,544
27
275
264

You need to change `cn.replace(' ', '.')` because it will only replace the first space. You'll need a `g`lobal regex that will also consider adjacent spaces to be one. Same with your `cn.split(/ /)`, it should be global, and test for adjacent spaces, and it should include other space characters, like tabs, so `\s` is probably better. – Mar 05 '12 at 15:35
@amnotiam Thanks yeah I got confused by PHP and forgot which one replaces all without the g modifier. I purposefully switched from `\s` to ` ` because I don't think the function will be called with tabs or newlines. I modified it to trim off trailing spaces as well. – Paul Mar 05 '12 at 15:40
Yeah, probably a safe bet about the tabs/new lines. – Mar 05 '12 at 15:45
@amnotiam Also there is no need for a `g` flag on cn.split. It wouldn't do anything because split finds all matches anyways. – Paul Mar 05 '12 at 15:45
Yes, you're right about the split. – Mar 05 '12 at 15:46

score 1 · Answer 4 · answered Mar 05 '12 at 15:13

1

use jQuery, or filter the results from getElementsByTag

answered Mar 05 '12 at 15:13

Simon Wang

2,843
1
16
32

score -3 · Answer 5 · answered May 10 '13 at 10:34

-3

you may try using jquery as it have alternative class selector to get the elements by there class names. $(".testclass").each... it will give you required elements by class names

answered May 10 '13 at 10:34

Ganesh Bora

1,133
9
17

getElementsByClassName & IE8: Object doesn't support this property or method

5 Answers5

Linked