Веб-разработка требует знаний нескольких языков программирования, а JavaScript является одним из наиболее популярных. В данной статье мы рассмотрим, как получить элементы на странице, которые имеют несколько имен классов.
Поиск элементов на странице
В JavaScript существует несколько методов для поиска элементов на странице. Одним из самых распространенных является метод document.getElementById(), который позволяет получить элемент по его идентификатору. Но что делать, если мы хотим найти элемент, у которого несколько имен классов?
Метод getElementsByClassName()
Метод getElementsByClassName() позволяет получить все элементы, которые имеют определенное имя класса. Для использования этого метода нам нужно обратиться к объекту document и вызвать метод getElementsByClassName(), передав ему имя класса в качестве аргумента:
let elements = document.getElementsByClassName('class-name');
Этот метод вернет коллекцию всех элементов, которые имеют класс с именем “class-name”. Однако, если элемент имеет несколько имен классов, то нам нужно модифицировать код.
Поиск элементов по нескольким именам классов
Чтобы найти элементы, у которых есть несколько имен классов, мы можем использовать метод querySelectorAll(). Этот метод возвращает все элементы на странице, которые соответствуют заданному CSS-селектору.
Для поиска элементов по двум именам классов мы можем написать следующий код:
let elements = document.querySelectorAll('.class1.class2');
Этот код вернет все элементы на странице, которые имеют классы “class1” и “class2”. Мы можем указать любое количество имен классов, разделяя их точкой.
Пример
Давайте рассмотрим пример, где мы будем получать все элементы, которые имеют классы “class1” и “class2”. Мы также добавим к каждому найденному элементу новый класс “selected”:
<div class="class1"></div>
<div class="class1 class2"></div>
<div class="class2"></div>
<div class="class3"></div>
let elements = document.querySelectorAll('.class1.class2');
for (let i = 0; i < elements.length; i++) {
elements[i].classList.add('selected');
}
В этом примере мы получим только второй элемент на странице, так как он имеет оба класса “class1” и “class2”. Затем мы добавим этому элементу новый класс “selected”.
Заключение
JavaScript предоставляет множество инструментов для работы с элементами на странице. Методы getElementsByClassName() и querySelectorAll() позволяют получить элементы по классам, а использование нескольких имен классов может быть решено с помощью модификации CSS-селектора. Надеюсь, этот материал поможет вам улучшить ваш опыт работы с JavaScript.
