Javascript根据类名获取元素

在前端开发中，经常需要根据元素的类名来获取对应的DOM元素。这时，Javascript提供一种方便的方法来实现——getElementsByClassName()。

假设我们有如下HTML代码：

div class="container">
    div class="box">
    box1/div>
    div class="box">
    box2/div>
    div class="box">
    box3/div>
    /div>
    

现在，我们希望获取所有类名为"box"的DOM元素，可以使用如下代码：

var boxes = document.getElementsByClassName("box");
    

执行这段代码后，变量boxes将包含所有类名为"box"的DOM元素。

如果要获取某一个具体的元素，可以通过下标来指定：

var box1 = boxes[0];
     //获取第一个box元素var box2 = boxes[1];
     //获取第二个box元素

如果有多个类名，可以在getElementsByClassName()中传入多个类名参数：

div class="container">
    div class="box yellow">
    box1/div>
    div class="box red">
    box2/div>
    div class="box yellow">
    box3/div>
    /div>
    var yellowBoxes = document.getElementsByClassName("box yellow");
     //获取类名为"box"和"yellow"的元素var redBoxes = document.getElementsByClassName("box red");
     //获取类名为"box"和"red"的元素

需要注意的是，getElementsByClassName()返回的是一个类似数组的对象，不能直接使用数组的方法进行操作，需要先将其转化为数组。幸运的是，现代浏览器提供了Array.from()方法来将其转化为数组：

var boxes = document.getElementsByClassName("box");
    var boxArray = Array.from(boxes);
 //将boxes对象转化为数组boxArray.forEach(function(box){
//对每个box进行操作}
    );

另外，如果想要支持IE8及以下版本的浏览器，可以使用自定义的函数来模拟getElementsByClassName()的功能：

function getElementsByClassName(className){
    var result = [];
    var elems = document.getElementsByTagName("*");
    for(var i=0;
    ielems.length;
i++){
    var elem = elems[i];
    if(elem.className.indexOf(className) >
 -1){
    result.push(elem);
}
}
    return result;
}
    

以上就是根据类名获取元素的相关内容，希望能对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！