document.getElementsByClassName

1. Введение: от одного элемента к целой группе 🔢

У нас есть кнопки для цифр и кнопки для операций: +, -, *, /. Чтобы заставить их работать с помощью JavaScript, мы нашли каждую кнопку по её уникальному id, а затем вручную собрали их в один массив.

// ❌ Неоптимальный подход: находим каждую кнопку отдельно...
var buttonPlus = document.getElementById("buttonPlus")
var buttonMinus = document.getElementById("buttonMinus")
var buttonMultiply = document.getElementById("buttonMultiply")
var buttonDivide = document.getElementById("buttonDivide")
 
// ...а потом вручную создаем из них массив.
var operationButtons = [buttonPlus, buttonMinus, buttonMultiply, buttonDivide]

2. Что такое HTML-класс и зачем он нужен? 🏷️

В нашем случае класс нужен не столько для оформления (хотя для CSS это его основное назначение), сколько для того, чтобы JavaScript мог легко идентифицировать и найти всю группу нужных нам объектов.

Давайте добавим всем нашим кнопкам операций один и тот же класс, например, operations-button.

<button id="buttonPlus" class="operation-button">+</button>
<button id="buttonMinus" class="operation-button">-</button>
<button id="buttonMultiply" class="operation-button">*</button>
<button id="buttonDivide" class="operation-button">/</button>

Теперь, когда у всех наших кнопок есть общий «ярлык», мы можем использовать специальную команду в JavaScript, чтобы собрать их все вместе.

3. Команда document.getElementsByClassName()📜

Основные свойства этой коллекции:

• 📋 Похожа на массив: элементы в ней можно получить по их порядковому номеру (индексу), например: [0], [1], [2].
• 🌐 Содержит все элементы: внутри находятся все HTML-элементы, у которых есть указанный класс.
• 🔄 «Живая» коллекция: если вы с помощью JavaScript добавите на страницу новый элемент с этим же классом, он автоматически появится в этой коллекции. И наоборот. Теперь, чтобы найти все наши кнопки, достаточно написать всего одну строку кода:

// Находим все элементы с классом 'operations-button'
var operationButtons = document.getElementsByClassName("operations-button")

4. Обработка массива кнопок 🖱️

После получения массива кнопок можно назначить им обработчики событий с помощью цикла:

for (var i = 0; i < operationButtons.length; i++) {
  var button = operationButtons[i] // Получаем текущую кнопку
  button.addEventListener("click", onOperationButtonClick) // Привязываем обработчик
}

5. Ключевые выводы 📝

• Класс в HTML — это как общая метка для группы элементов.
• Команда document.getElementsByClassName('имя-класса') находит сразу все элементы с этой меткой.
• Результат — коллекция, с которой можно работать как с единым целым (например, в цикле), применяя одинаковые действия ко всем элементам сразу.
• Использование этого подхода делает код короче, чище и проще для поддержки.