Javascript IE and getElementsByClassName problems

Question

So first off I am learning JS and will not use a library until I know all I need to.

http://www.tombarrasso.com/search/

With that said why on earth does my code not work in < IE 7, Firefox < 3, etc? Safari 4 is perfect, Firefox 3.5 is great, etc. I am using the function getElementsByClassName from Robert Nyman.

It generates no errors in my IE 6 on OS X (through Wine). The Ajax request is fine, but there should be an initial div with id="one" and class="scroller", but there is not. I am just getting so frustrated with this.

Thanks,

Tom

turns out .setAttribute("class", "scroller") is not good for some IEs, so I need to also to .setAttribute("className", "scroller"). Additionally I needed to add all .appendChild() in one line, as IE does not hold it from one to the next. But IE 8 does not observe these as IE 6 and 7 do. — Tom, Aug 15 '09 at 14:55
See http://blogs.msdn.com/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx for a description of changes around className. — EricLaw, Aug 16 '09 at 00:34

score 8 · Answer 1 · answered Dec 12 '11 at 09:51

..or you can use this as a better solution...

if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
                ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}

score 3 · Accepted Answer · answered Aug 15 '09 at 13:56

Personally, I would just use jQuery, as it already has the browser-compatability problems you are running into.

It's all fine to learn it all; but when it comes to handling implementation compatability it's better to have it dealt with for you, IMHO. There are just some things I don't care about :P

score 2 · Answer 3 · answered Feb 11 '10 at 21:58

2

IE8 gives error -"Object doesn't support property or method" when we use getElementsByClassName in javascript. Try this instead.

if (document.getElementsByClassName) {
    var obj = document.getElementsByClassName('classA');
}

answered Feb 11 '10 at 21:58

Purni

211
1
11

score 0 · Answer 4 · answered Jun 09 '11 at 08:44

0

I used jQuery to fix my problem supporting those backward clients with ie7.

Old:

var editrow = grid.get_element().getElementsByClassName("rgEditRow")[0];

New:

var editrow = $(".rgEditRow", grid.get_element())[0];

answered Jun 09 '11 at 08:44

JumpingJezza

5,498
11
67
106

Javascript IE and getElementsByClassName problems

4 Answers4

Linked