Когда дело доходит до управления объектной моделью документа (DOM) в JavaScript, умение выбирать элементы с определенными именами классов является важнейшим навыком. Хотя метод getElementByClassNameобычно используется для извлечения элементов с одним именем класса, что, если вам нужно найти элементы с несколькими именами классов? В этой статье мы рассмотрим различные методы решения этой задачи, приведя попутно примеры кода. Итак, приступим!

Метод 1: использование querySelectorAll
Один из наиболее универсальных методов выбора элементов с несколькими именами классов — querySelectorAll. Этот метод позволяет использовать синтаксис селектора CSS для выбора элементов на основе их имен классов. Чтобы выбрать элементы с несколькими именами классов, вы можете просто объединить имена классов без пробелов, используя точку (.) в качестве разделителя. Вот пример:

const elements = document.querySelectorAll('.class1.class2.class3');

Метод 2: перебор элементов с помощью getElementsByClassName
Хотя метод getElementsByClassNameв первую очередь предназначен для извлечения элементов по одному имени класса, вы все равно можете использовать его для фильтруйте элементы с несколькими именами классов, перебирая результаты. Вот пример:

const elements = document.getElementsByClassName('class1');
const filteredElements = [];
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  if (element.classList.contains('class2') && element.classList.contains('class3')) {
    filteredElements.push(element);
  }
}

Метод 3: использование пользовательской вспомогательной функции
Если вам часто приходится выбирать элементы с несколькими именами классов, вы можете создать собственную вспомогательную функцию, чтобы упростить процесс. Вот пример многократно используемой функции, которая достигает этого:

function getElementsByMultipleClasses(...classNames) {
  const elements = document.getElementsByTagName('*');
  return Array.from(elements).filter(element => {
    return classNames.every(className => element.classList.contains(className));
  });
}
const elements = getElementsByMultipleClasses('class1', 'class2', 'class3');

В этой статье мы рассмотрели несколько методов выбора элементов с несколькими именами классов в JavaScript. Мы рассмотрели использование querySelectorAllдля кратких запросов на основе селекторов CSS, перебор результатов с помощью getElementsByClassNameи создание специальной вспомогательной функции для повторного использования. Используя эти методы, вы сможете гибко нацеливаться на элементы DOM и манипулировать ими с высокой точностью, независимо от комбинаций имен их классов.