Question

我们如何使用javascript操纵DOM元素的类？是否有getElementsByClassName函数？

Answer 1

标准方式

error_message.className = 'error-message';

但你会发现这些功能可以简化很多事情：

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
//chekcs if selected element has class "cls", works for elements with multiple classes

function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
//adds new class to element

function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}
//removes class from element

使用stackoverflow greasemonkey脚本在页面上显示所有问题，无论它们是否被忽略：

var childNodes=document.getElementById("questions").childNodes; //array of all questions

for (var i=1; i<childNodes.length; i+=2) //iterates through all questions on page. 
{
    removeClass(childNodes[i],"tagged-ignored-hidden");
    addClass(childNodes[i],"user_defined_class");   
}

（不要担心，如果for循环看起来很奇怪，它会跳过所有其他元素; Stackoverflow的DOM布局在问题之间有额外节点的细节在这里并不重要。）

对于document.getElementsByClassName，它返回一个具有特定类的DOM元素数组（正如您所怀疑的那样）。但是：

Safari 3.1具有原生功能 getElmentsByClassName支持，和即将推出的Firefox 3和Opera 9.5将会推出也有它。它只剩下了，你已经猜到了，Internet Explorer。

source

Answer 2

您可以使用以下内容更改普通JavaScript中的类：

document.getElementById('myElement').className = 'myClass';

或者，如果您使用的是JQuery，则可以使用"Class" functions。

解决有关“getElementsByClassName”和您的评论的问题的详细信息：

使用您喜欢的JavaScript库可能是最安全的（也是最简单的）。

JQuery示例：

$(".myClassName").each(function() {
    //do what you want with the current element $(this)
});

希望有所帮助。

Answer 3

许多JavaScript实现都内置了getElementsByClassName方法。但如果他们不这样做，您可以自己实现它：

if (typeof Element.prototype.getElementsByClassName == "undefined") {
    Element.prototype.getElementsByClassName = function(className) {
        var elems = document.getElementsByTagName("*"),
            matches = [];
        for (var i=0, n=elems.length; i<n; ++i) {
            if (elems[i].hasAttribute("class")) {
                var classNames = elems[i].getAttribute("class").split(/\s+/);
                for (var j=0,m=classNames.length; j<m; ++j) {
                    if (classNames[j] == className) {
                        matches.push(elems[i]);
                        break;
                    }
                }
            }
        }
        return new NodeList(matches);
    };
}

JS：我们如何使用CSS中的类？

3 个答案: