Поиск элементов: getElementBy*

1. getElementById: поиск по уникальному идентификатору

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

В нашем мини-приложении: допустим, у нас есть форма регистрации, и мы хотим подсветить поле с ошибкой или вывести сообщение. Для этого нужно найти нужный элемент и изменить его свойства.

Как это работает?

Каждому элементу на странице можно (и часто нужно) присвоить уникальный id. Метод getElementById позволяет найти ровно один элемент с этим id.

Синтаксис:

const элемент = document.getElementById('myId');

• Возвращает: один элемент (объект) или null, если такого нет.
• Если на странице два элемента с одинаковым id — будет найден только первый (но так делать нельзя, id должен быть уникальным!).

Пример

Допустим, у нас есть такой HTML:

<div id="greeting">Привет, гость!</div>

Найдём этот элемент и изменим текст:

// Найдём элемент с id="greeting"
const greetingDiv = document.getElementById('greeting');

// Изменим его текст
greetingDiv.textContent = 'Добро пожаловать!';

Комментарий:

const notFound = document.getElementById('abracadabra');
console.log(notFound); // null

и попробуете обратиться к его свойствам — получите ошибку. Поэтому всегда стоит проверять, что элемент найден!

Применим к нашему приложению

Добавим в HTML:

<input id="username" type="text" placeholder="Ваше имя">
<button id="sayHelloBtn">Поздороваться</button>
<div id="message"></div>

И JS:

const btn = document.getElementById('sayHelloBtn');
const input = document.getElementById('username');
const message = document.getElementById('message');

btn.addEventListener('click', function() {
  message.textContent = `Привет, ${input.value}!`;
});

Теперь, когда пользователь нажимает кнопку, мы находим значения по id и работаем с ними напрямую.

2. getElementsByClassName: ищем по классу

Как это работает?

Когда нужно найти несколько элементов с одинаковым классом (например, все кнопки с классом action), используйте getElementsByClassName.

Синтаксис:

const элементы = document.getElementsByClassName('имя_класса');

• Возвращает: HTMLCollection — "псевдомассив" элементов (можно перебирать по индексу, но это не настоящий массив).
• Если ничего не найдено — вернётся пустая коллекция, а не null.

Пример

HTML:

<ul>
  <li class="todo">Купить хлеб</li>
  <li class="todo">Погулять с собакой</li>
  <li class="done">Почистить зубы</li>
</ul>

JS:

const todos = document.getElementsByClassName('todo');
console.log(todos); // HTMLCollection(2) [li, li]

// Перебираем элементы
for (let i = 0; i < todos.length; i++) {
  todos[i].style.color = 'blue';
}

Теперь все задачи с классом todo станут синими.

Важный момент:
HTMLCollection "живой" — если вы добавите элемент с этим классом после поиска, он появится в коллекции автоматически.

Применим к приложению

Добавим несколько полей с одинаковым классом:

<input class="field" type="text" placeholder="Имя">
<input class="field" type="text" placeholder="Фамилия">
<input class="field" type="text" placeholder="Email">

JS:

const fields = document.getElementsByClassName('field');
for (let i = 0; i < fields.length; i++) {
  fields[i].style.border = '1px solid green';
}

Все поля получат зелёную рамку.

3. getElementsByTagName: ищем по тегу

Как это работает?

Иногда нужно найти все элементы определённого типа, например, все абзацы <p> или все картинки <img>. Для этого есть getElementsByTagName.

Синтаксис:

const элементы = document.getElementsByTagName('имя_тега');

• Возвращает: HTMLCollection всех элементов с этим тегом.
• Работает быстро, но возвращает все элементы, даже если их 100500.

Пример

HTML:

<div>Первый блок</div>
<div>Второй блок</div>
<p>Абзац</p>

JS:

const divs = document.getElementsByTagName('div');
console.log(divs); // HTMLCollection(2) [div, div]

for (let i = 0; i < divs.length; i++) {
  divs[i].style.background = 'lightyellow';
}

Оба блока станут жёлтыми.

Применим к приложению

Допустим, у нас несколько кнопок:

<button>Добавить</button>
<button>Удалить</button>
<button>Сохранить</button>

JS:

const buttons = document.getElementsByTagName('button');
for (let i = 0; i < buttons.length; i++) {
  buttons[i].disabled = true; // Отключаем все кнопки
}

4. Полезные нюансы

Отличия между методами поиска

getElementById('id')

getElementsByClassName('c')

getElementsByTagName('tag')

Совет:
Если вы хотите изменить только один конкретный элемент — используйте getElementById.
Если нужно обработать группу — getElementsByClassName или getElementsByTagName.

Как работать с результатами поиска: HTMLCollection

HTMLCollection - это не совсем массив, а такой "почти-массив", который можно перебирать по индексу (collection[0], collection[1]), узнавать длину (collection.length), но нельзя использовать методы массивов (forEach, map и т.д.) напрямую.

Пример перебора:

const elems = document.getElementsByClassName('todo');
for (let i = 0; i < elems.length; i++) {
  elems[i].textContent += ' (сделать)';
}

Если очень хочется использовать forEach:

const elems = document.getElementsByClassName('todo');
// Преобразуем в массив:
Array.from(elems).forEach(function(elem) {
  elem.textContent += ' (forEach)';
});

5. Практика: выделяем элементы на странице

Давайте добавим к вашему приложению "подсветку" всех полей формы.

HTML:

<form>
  <input class="field" type="text" placeholder="Имя">
  <input class="field" type="text" placeholder="Фамилия">
  <input class="field" type="text" placeholder="Email">
  <button id="highlightBtn">Подсветить поля</button>
</form>

JS:

const highlightBtn = document.getElementById('highlightBtn');
const fields = document.getElementsByClassName('field');

highlightBtn.addEventListener('click', function(event) {
  event.preventDefault(); // Чтобы форма не отправлялась
  for (let i = 0; i < fields.length; i++) {
    fields[i].style.background = 'lightblue';
  }
});

Теперь при нажатии на кнопку все поля подсвечиваются.

6. Типичные ошибки при поиске элементов

Ошибка №1: опечатка в id или классе.
Если в HTML написано <div id="main"></div>, а в JS ищете getElementById('mein'), то получите null. Проверяйте орфографию!

Ошибка №2: обращение к свойству у несуществующего элемента.
Если элемент не найден, переменная будет равна null. Попытка обратиться к свойству вызовет ошибку:

const foo = document.getElementById('foo');
foo.textContent = '!!!'; // Ошибка, если foo === null

Проверяйте, найден ли элемент:

if (foo) {
  foo.textContent = '!!!';
}

Ошибка №3: попытка изменить свойство у коллекции.
getElementsByClassName и getElementsByTagName возвращают коллекцию, а не один элемент. Вы не можете делать так:

const fields = document.getElementsByClassName('field');
fields.style.color = 'red'; // Не сработает!

Нужно перебрать коллекцию поэлементно.

Ошибка №4: забыли, что коллекция "живая".
Если вы добавляете элементы с нужным классом после поиска, коллекция автоматически обновится. Иногда это неожиданно.

Ошибка №5: поиск до загрузки DOM.
Если ваш JS-код подключён в <head> или до элементов, поиск может вернуть null — элементы ещё не созданы. Решение: подключайте скрипты в конце <body>, либо используйте событие DOMContentLoaded.

1

Задача

Модуль 1: Web Core, 22 уровень, 1 лекция

Недоступна

Асинхронная операция

Асинхронная операция

Открыть

1

Задача

Модуль 1: Web Core, 22 уровень, 1 лекция

Недоступна

Параллельные операции

Параллельные операции

Открыть