Работа с DOM

DOM (Document Object Model) — это представление HTML-страницы в виде дерева объектов. JavaScript может изменять любую часть страницы через DOM.

Выбор элементов

// По ID (один элемент)
const header = document.getElementById("header");

// По классу (коллекция)
const buttons = document.getElementsByClassName("btn");

// По CSS-селектору (первый найденный)
const nav = document.querySelector(".nav");

// По CSS-селектору (все найденные)
const items = document.querySelectorAll(".item");

Изменение содержимого

const element = document.querySelector("#title");

// Текстовое содержимое
element.textContent = "Новый заголовок";

// HTML-содержимое
element.innerHTML = "<strong>Жирный</strong> текст";

// Значение input
document.querySelector("#email").value = "test@mail.ru";

Изменение стилей

const box = document.querySelector(".box");

// Отдельные свойства
box.style.backgroundColor = "red";
box.style.fontSize = "20px";
box.style.display = "none";

// Добавление/удаление классов
box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("visible"); // вкл/выкл

Работа с атрибутами

const link = document.querySelector("a");

// Чтение
console.log(link.getAttribute("href"));

// Установка
link.setAttribute("href", "https://google.com");
link.setAttribute("target", "_blank");

// Удаление
link.removeAttribute("title");

// Data-атрибуты
element.dataset.userId = "123";
console.log(element.dataset.userId);

Создание элементов

// Создать элемент
const newDiv = document.createElement("div");
newDiv.textContent = "Новый блок";
newDiv.classList.add("card");

// Добавить в DOM
document.body.appendChild(newDiv);

// Вставить перед другим элементом
const container = document.querySelector(".container");
container.insertBefore(newDiv, container.firstChild);

// Удалить элемент
newDiv.remove();