JS: DOM — выбор элементов

Введение

Мы освоили массивы и объекты. Теперь — DOM (Document Object Model): представление HTML-документа в виде дерева объектов. JavaScript может выбирать элементы и изменять их: текст, атрибуты, стили, структуру. Это основа интерактивности страниц, которые мы верстали на уроках «Лендинг» и ранее.

Задачи

• Использовать getElementById, querySelector, querySelectorAll.
• Изменять textContent и innerHTML.
• Получать и устанавливать атрибуты.

getElementById

const elem = document.getElementById("header");

Возвращает один элемент с указанным id или null.

Выбор метода для поиска элементов

querySelector и querySelectorAll

const first = document.querySelector(".card");
const all = document.querySelectorAll(".card");

querySelector — первый подходящий. querySelectorAll — список (NodeList). Селекторы как в CSS.

textContent и innerHTML

elem.textContent = "Новый текст";
elem.innerHTML = "<strong>Жирный</strong> текст";

textContent — только текст, экранирует теги. innerHTML — разметка, опасно при пользовательском вводе (XSS).

Атрибуты

elem.getAttribute("href");
elem.setAttribute("href", "https://...");
elem.classList.add("active");
elem.classList.remove("active");
elem.classList.toggle("active");

Важно: когда выполняется скрипт

Скрипт выполняется при загрузке. Элементы должны уже быть в DOM. Подключай скрипт перед </body> или используй событие DOMContentLoaded.

Практика

1. Выбери элемент по id и измени его текст.
2. Выбери все параграфы и измени цвет через style.color.
3. Добавь класс элементу по клику (пока через атрибут onclick в HTML).

Подведём итоги

Мы научились выбирать элементы и менять их содержимое. На следующем уроке — создание и удаление элементов.

Типичные ошибки

• Допускать опечатку в getElementById: часто пишут getElementByID (с большой D) вместо getElementById (с маленькой d).
• Искать несуществующий элемент через querySelector — метод возвращает null, из-за чего код падает при дальнейшем обращении к элементу.
• Путать innerHTML (с парсингом тегов) и textContent (только текст, безопаснее).
• Искать элемент до его появления в DOM — скрипт должен выполняться после загрузки body или в DOMContentLoaded.

Домашнее задание

Упражнение №1

Создай страницу с <p id="output">. В скрипте измени текст на «Привет из JavaScript!».

Упражнение №2

Страница с 5 параграфами класса item. Через цикл измени цвет каждого чётного на синий.

Упражнение №3

Список с id. По кнопке «Показать количество» выведи в отдельный элемент число пунктов списка.

Упражнение №4

Поле ввода и кнопка. При нажатии кнопки — текст из поля копируется в другой элемент на странице.

Упражнение №5

Три кнопки с data-атрибутом data-color. По клику меняй цвет фона body на значение атрибута.