getElementsByClassName Iexplorer compatibility

Question

Good afternooon,

Let me start of by saying, i see alot of posts about this subject, and included/tried alot of them to fix the issue that i have.

Now the thing is, im trying to figure out about compatibility modes with the several browsers that are available. Im struggling with Iexplorer, almost every version..

Everything i try, on several kinds of scripts just dont work in that browser and do in all the others.

The main issue i have is with getElemtsByClassName. For instance with this:

var tag = window.document.getElementsByClassName("kat");

It always returns in this: Object doesn't support property or method 'getElementsByClassName'.

I've seen this issue alot on the web, also in here, is there someone who has some info on bypassing this issue? Tried some stuff out to like changing it into:

var tag = window.getElementsByClassName("kat");

or

var tag = getElementsByClassName("kat");

But, i'm guessing im thinking in the wrong direction.. Can someone give me a hint or a link to read on how to solve something like this?

This is the header i normally use, wich i read should solve alot of issues:

<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

As one of my examples:

function insDiv() {
    var tag = window.document.getElementsByClassName("kat"), total = 0;
        for (var i in tag)
    {
    total += tag[i].checked && !isNaN(Number(tag[i].value)) ? Number(tag[i].value) : 0;
    }
    window.document.getElementById("insDiv").innerHTML = 'Kat: ' + total.toFixed(2);
}

Wich works perfectly in chrome/firefox/etc. just not in Iexplorer.

There should be no issues with IE >= 9. For earlier versions you will need to work around the fact that this is not supported. — Jon, Jan 17 '14 at 13:58
Started with iexplorer 10, but i tried it in 9 aswell, wich ends up with the same issue — Tim, Jan 17 '14 at 13:58
`getElementsByClassName` only works in IE9 and above. For IE8 support you can use `querySelectorAll('.classname')` — adeneo, Jan 17 '14 at 13:58
getElementsByClassName was introduced to Internet Explorer in version 9. Perhaps jQuery or a similar abstraction library is a better fit for what you want. — Steven Don, Jan 17 '14 at 13:58
Something is putting you in quirks mode. You don't actually have the `doctype` directly before the `meta` tag, do you? — cookie monster, Jan 17 '14 at 14:26
Ok fixed that, dreamweaver did that for some reason. Now ive got: — Tim, Jan 17 '14 at 14:43

score 6 · Accepted Answer · answered Jan 17 '14 at 13:58

6

I would forget about .getElementsByClassName() and stick with .querySelectorAll(), which works very similarly to jQuery selectors. Works perfectly in IE8 with CSS2 selectors:

var elements = document.querySelectorAll('.myClass');

You can create your own reusable selector from it too:

var $$ = function (selector) {
    return document.querySelectorAll(selector);
};

// usage
$$('#id');
$$('.className');
$$('[attributes]');

answered Jan 17 '14 at 13:58

Todd Motto

903
6
10

1

"very similarly to jQuery selectors" The difference is, you could only use selectors, which the browser also understands in CSS – which means no CSS3 selectors for IE 8… – feeela Jan 17 '14 at 14:01
@feeela: There are a few CSS3 selectors available in IE8, but not all. – cookie monster Jan 17 '14 at 14:23
Thanks @ all i got it working :D It was this + Iexplorer was having trouble with duplicate names and id's i gave to some input's! I guess chrome/firefox dont mind that, iexplorer does! – Tim Jan 17 '14 at 15:10

getElementsByClassName Iexplorer compatibility

1 Answers1