Selecting a div by classname

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?

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;

    };
}

Nope, that's how it's done. Unless they're in something with an ID you're stuck iterating all DIVs on the page. Fortunately it is just a list though (no need to recurse through a tree) so it's not so bad.

I would suggest using XPaths to select the nodes. Might work...

Use jQuery/Sizzle. IE6 and up. :)

Load it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Use it:

jQuery('.class.otherclass.anotherclass')