Вы можете использовать getElementsByClassName() для получения или выбора элементов по значению их атрибута класса в JavaScript. Этот метод возвращает массив совпадающих элементов, потому что более одного элемента на странице могут иметь один и тот же класс. Давайте посмотрим на пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select Element by Class in JavaScript</title>
<style>
.box{
height: 50px;
background: #ddd;
margin: 20px;
}
.box.bordered{
border: 5px solid #333;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box bordered"></div>
<div class="box"></div>
<div class="box bordered"></div>
<div class="box"></div>
<script>
var boxes = document.getElementsByClassName("box");
// Выберем первое поле и выделим его красным фоном.
boxes[0].style.background = "red";
/* Выберем элементы, имеющие как класс "box", так и класс "bordered" и выделим их желтым фоном */
var borderedBoxes = document.getElementsByClassName("box bordered");
for(var i = 0; i < borderedBoxes.length; i++){
borderedBoxes[i].style.background = "yellow";
}
// Выберем последний элемент и выделим его зеленым фоном.
boxes[boxes.length - 1].style.background = "green";
</script>
</body>
</html>
