按类名选择 div

Question

我得到了这个 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>

在我的页面中间，它没有 id，我无法编辑页面 HTML，我也无法使用 jQuery。还尝试用 IE7 和 IE8 来实现。

这里是噩梦:)

解决方案是 document.getElementsByClassName 但这与 ie7 和 ie8 不兼容。

这个div被埋在大约10个div中，所有这些div都是相似的风格，没有id等。这个div上的类是独一无二的！

我能看到的唯一解决方案是获取所有 div 并循环它们以查找类似的 hasAttriutes 。

有人有更好的主意吗？

Answer 1

以下是针对不兼容浏览器的 getElementsByClassName 的跨浏览器实现 (引用）：

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;

    };
}

Answer 2

不，就是这样完成的。除非它们位于带有 ID 的某物中，否则您将不得不迭代页面上的所有 DIV。幸运的是，它只是一个列表（不需要通过树递归），所以它还不错。

Answer 3

我建议使用 XPaths 来选择节点。可能有用...

Answer 4

使用 jQuery/Sizzle。 IE6及以上版本。 :)

加载它：

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

使用它：

jQuery('.class.otherclass.anotherclass')