Мы освоили массивы и объекты. Теперь — DOM (Document Object Model): представление HTML-документа в виде дерева объектов. JavaScript может выбирать элементы и изменять их: текст, атрибуты, стили, структуру. Это основа интерактивности страниц, которые мы верстали на уроках «Лендинг» и ранее.
getElementById, querySelector, querySelectorAll.textContent и innerHTML.getElementByIdconst elem = document.getElementById("header");Возвращает один элемент с указанным id или null.
querySelector и querySelectorAllconst first = document.querySelector(".card");
const all = document.querySelectorAll(".card");querySelector — первый подходящий. querySelectorAll — список (NodeList). Селекторы как в CSS.
textContent и innerHTMLelem.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.
id и измени его текст.style.color.onclick в HTML).Мы научились выбирать элементы и менять их содержимое. На следующем уроке — создание и удаление элементов.
getElementById: часто пишут getElementByID (с большой D) вместо getElementById (с маленькой d).querySelector — метод возвращает null, из-за чего код падает при дальнейшем обращении к элементу.innerHTML (с парсингом тегов) и textContent (только текст, безопаснее).body или в DOMContentLoaded.Создай страницу с <p id="output">. В скрипте измени текст на «Привет из JavaScript!».
Страница с 5 параграфами класса item. Через цикл измени цвет каждого чётного на синий.
Список с id. По кнопке «Показать количество» выведи в отдельный элемент число пунктов списка.
Поле ввода и кнопка. При нажатии кнопки — текст из поля копируется в другой элемент на странице.
Три кнопки с data-атрибутом data-color. По клику меняй цвет фона body на значение атрибута.