Question

我需要访问特定cssclass的所有<a>个元素。我知道如何使用jQuery来做到这一点。是否可以使用javascript函数，而不是jQuery。

到目前为止我所做的是获取所有锚标记：有没有办法在下面的for循环中按类名进行过滤？

function something() {
    var elements = document.getElementsByTagName("a");
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        //alert(element.value);
    }
    //alert("total elements : " + elements.length);

}

感谢任何帮助。

Answer 1

querySelectorAll采用通用CSS选择器，搜索DOM树的任何子分支并返回IE 8（使用CSS2选择器）：

// find all <a> tags that contain someclass as a class name
var elements = document.querySelectorAll("a.someclass");

如果你真的想早点回到IE 8，我真的建议你自己选择一个能够为你做所有跨浏览器的选择器库，并且已经过很好的测试并支持很好的数组选择。这不是您必须处理的第一个也是唯一的功能。我为此目的使用了Sizzle，它是jQuery内部的Sizzle引擎，但也有其他。你总是可以从getElementsByTagName()开始编写自己的函数，并对结果应用更多的测试，但是为什么要重新设计长期以来为你做过的浏览器工作，除非你对特征检测有所了解，否则你可以在内置更多功能的现代浏览器中，这样做会很慢。

Answer 2

您可以使用：

document.getElementsByClassName('someclass')

获取具有特定类的所有元素。

在某些浏览器中，您可以使用：

document.querySelector('a.classname');

通过CSS选择器查询元素。

编辑：纯粹的JS解决方案，应该在＆＃34;所有＆＃34;浏览器：

function something(classNameToFind) {
    var elements = document.getElementsByTagName("a");
    for (var i = 0; i < elements.length; i++) {
        var classNames = elements[i].className.split(' ');        
        for (var j = 0; j < classNames.length; j++)
        {
            if (classNames[j] === classNameToFind)
            {
                alert('The element has the class');    
            }
        }
    }
}

something('test');

请参阅小提琴：http://jsfiddle.net/pJ9Ys/1/

Answer 3

我没有足够的代表发表评论，但请看一下here（通过快速搜索找到，所以我不知道它的效果如何）。看起来jfriend00的答案可能就是你想要的。

document.getElementsByClassName = function( classname ) {
    var elArray = [];
    var tmp = document.getElementsByTagName("*");
    var regex = new RegExp("(^|\s)" + classname + "(\s|$)");
    for ( var i = 0; i &lt; tmp.length; i++ ) {

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

    return elArray;
};

Answer 4

把它放在你的循环中：

if(elements[i].className == 'targetName') alert('found');

我需要得到所有<a> tags that have a particular CssClass using regular javascript function?</a>

4 个答案: