Что такое DOM
DOM (Document Object Model) — это объектная модель документа, которая представляет структуру HTML-страницы в виде дерева. JavaScript использует DOM для взаимодействия с элементами страницы: выбора, изменения и удаления.
Как выбрать элемент
Есть несколько способов выбрать элементы на странице:
document.getElementById("id")— выбрать элемент по уникальному идентификатору.document.getElementsByClassName("class")— получить все элементы с классом (возвращает HTMLCollection).document.querySelector("css-селектор")— выбрать первый элемент по CSS-селектору.document.querySelectorAll("css-селектор")— выбрать все элементы по CSS-селектору (возвращает NodeList).
Самый универсальный и современный способ — использовать querySelector и querySelectorAll.
Пример выбора элемента по ID и изменение текста
<div id="greeting">Привет!</div>
<script>
const elem = document.getElementById("greeting");
elem.textContent = "Привет от JavaScript!";
</script>Изменение атрибутов и стилей
С помощью JavaScript можно менять не только текст, но и атрибуты элементов и их стили:
elem.setAttribute("src", "image.jpg")— изменить атрибутsrc.elem.style.color = "red"— изменить цвет текста.elem.classList.add("active")— добавить класс.elem.classList.remove("hidden")— убрать класс.
Выбор нескольких элементов и перебор
Если выбрано несколько элементов, можно перебрать их с помощью цикла:
const items = document.querySelectorAll(".item");
items.forEach(function(elem) {
elem.style.backgroundColor = "#eef";
});Почему важно знать DOM
Без умения работать с DOM невозможно создавать интерактивные сайты и веб-приложения. Это фундамент для понимания динамического поведения страниц и взаимодействия с пользователем.
Пример: интерактивные кнопки с изменением стиля
Пример: простой счётчик лайков
блок
блок
блок
Совет: Учись работать с DOM постепенно — начинай с выбора элементов, потом пробуй менять текст, стили и атрибуты.
Что дальше
В следующем уроке мы познакомимся с событиями — как отслеживать клики, ввод с клавиатуры и другие действия пользователя.