getElementById и getElementsByClassName
Используйте классические методы выбора элементов.
«getElementById и getElementsByClassName» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
getElementById
getElementById возвращает единственный элемент с соответствующим id или null. Идентификаторы на странице должны быть уникальными, поэтому этот метод возвращает один элемент.
const header = document.getElementById("header");
console.log(header.tagName);Без символа решётки
В отличие от селекторов CSS, передавайте идентификатор в исходном виде, без символа #. Передача «#header» не даст совпадения.
document.getElementById("menu"); // correct
document.getElementById("#menu"); // wrong, returns nullgetElementsByClassName
getElementsByClassName возвращает динамическую HTMLCollection всех элементов с указанным классом.
const cards = document.getElementsByClassName("card");
console.log(cards.length);Динамическая коллекция элементов
Коллекция автоматически обновляется при изменениях в DOM. Если позже добавить новый .card, значение cards.length увеличится без повторного запроса.
const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automaticallyИндексация коллекции
Получайте элементы по индексу. HTMLCollection похожа на массив, но настоящим массивом не является.
const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);Нет прямой поддержки forEach
Поскольку HTMLCollection похожа на массив, но не является им, у неё нет forEach. Сначала преобразуйте её или используйте обычный цикл for.
const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
console.log(cards[i].textContent);
}getElementsByTagName
getElementsByTagName возвращает динамическую HTMLCollection всех элементов с указанным тегом, например всех абзацев.
const paras = document.getElementsByTagName("p");
console.log(paras.length);Несколько классов
Можно передать несколько имён классов, разделённых пробелами. Чтобы попасть в результат, элементы должны иметь все указанные классы.
const items = document.getElementsByClassName("btn primary");Поиск внутри элемента
Эти методы доступны и у элементов, поэтому поиск ограничивается потомками соответствующего элемента.
const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");Преобразование в массив
Чтобы использовать методы массива, например map или filter, разверните коллекцию в настоящий массив.
const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);Какой метод выбрать
Используйте getElementById для быстрого поиска уникального элемента. Выбирайте querySelectorAll, когда нужен статический снимок или сложные селекторы, а семейство методов getElementsBy* — когда нужна именно динамическая коллекция.
Быстрая проверка
Выберите подходящее поведение.
Итоги
Вы узнали о getElementById — поиске одного элемента по идентификатору без символа #, а также о getElementsByClassName и getElementsByTagName, возвращающих динамические коллекции HTML-элементов. Для использования методов массива динамические коллекции нужно преобразовать с помощью Array.from; собственной поддержки forEach у них нет.
Часто задаваемые вопросы
Урок «getElementById и getElementsByClassName» бесплатный?
Да — полный текст урока «getElementById и getElementsByClassName» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «getElementById и getElementsByClassName»?
Используйте классические методы выбора элементов. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «getElementById и getElementsByClassName»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Выбор элементов с помощью querySelector
- getElementById и getElementsByClassName
- Переход между родителями, дочерними и соседними элементами
- NodeList и HTMLCollection