Question

I got this div…

<div tabindex="0" class="button-base inline-block button aw-btn button-base-active">
    <input type="text" tabindex="-1" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow-x: hidden; overflow-y: hidden; position: absolute; ">
 </div>

in the middle of my page, it has no id and I am unable to edit the pages HTML, I am also no able to use jQuery. Also trying to do it with IE7 and IE8.

Nightmare here 🙂

The solution would be document.getElementsByClassName but that is not ie7 and ie8 compatible.

This div is buried in about 10 divs, all of which are similar style with no id’s etc. The classes on this div are unique!

The only solution I can see is to get ALL divs and loop them looking for hasAttriutes similar.

Anyone have a better idea?

Answer 1

Here’s a cross-browser implementation of getElementsByClassName for non-compliant browsers (citation):

if (!document.getElementsByClassName)
{

    document.getElementsByClassName = function(classname)
    {
        var elArray = [];

        var tmp = document.getElementsByTagName("*");

        var regex = new RegExp("(^|\\s)" + classname + "(\\s|$)");
        for ( var i = 0; i < tmp.length; i++ ) {

            if ( regex.test(tmp[i].className) ) {
                elArray.push(tmp[i]);
            }
        }

        return elArray;

    };
}