Работа с DOM в JavaScript

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

Получение элементов

Прежде чем изменить элемент на странице, его нужно найти.

getElementById(id)

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

HTML:

<h1 id="main-title">Заголовок</h1>

JavaScript:

const title = document.getElementById("main-title");
console.log(title.textContent); // "Заголовок"

querySelector(selector)

Возвращает первый элемент, соответствующий указанному selector.

HTML:

<ul>
  <li class="list-item">Элемент 1</li>
  <li class="list-item">Элемент 2</li>
</ul>

JavaScript:

const firstItem = document.querySelector(".list-item");
console.log(firstItem.textContent); // "Элемент 1"

querySelectorAll(selector)

Возвращает массив элементов, соответствующих указанному selector.

HTML:

<ul>
  <li class="list-item">Элемент 1</li>
  <li class="list-item">Элемент 2</li>
</ul>

JavaScript:

const listItems = document.querySelectorAll(".list-item");
console.log(listItems.length); // 2
items.forEach((item) => console.log(item.textContent)); // Выведет все 3 элемента

Изменение элементов

После того, как элемент найден, можно изменить его свойства и содержимое.

textContent

Изменяет текст элемента.

HTML:

<h1 id="main-title">Заголовок</h1>

JavaScript:

const title = document.getElementById("main-title");
title.textContent = "Новый заголовок";

innerHTML

Изменяет содержимое элемента.

HTML:

<div class="content">Старый контент</div>

JavaScript:

const content = document.querySelector(".content");
content.innerHTML = "<p>Новый <strong>жирный</strong> текст</p>";

setAttribute(name, value)

Изменяет атрибут элемента.

HTML:

<a href="#">Старая ссылка</a>

JavaScript:

const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
link.textContent = "Перейти на Example";

removeAttribute(name)

Удаляет атрибут элемента.

HTML:

<a href="#">Старая ссылка</a>

JavaScript:

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

Работа с классами

Классы позволяют добавлять и удалять CSS-классы элементов.

classList.add(className)

Добавляет класс в элемент.

HTML:

<div class="box">Я коробка</div>

JavaScript:

const box = document.querySelector(".box");
box.classList.add("active");

classList.remove(className)

Удаляет класс из элемента.

HTML:

<div class="box active">Я коробка</div>

JavaScript:

const box = document.querySelector(".box");
box.classList.remove("active");

classList.toggle(className)

Переключает класс в элемент.

HTML:

<div class="box">Я коробка</div>

JavaScript:

const box = document.querySelector(".box");
box.classList.toggle("active");

CSS для примера:

.active { color: green; font-weight: bold; }

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

createElement(tagName)

Создает элемент с указанным tagName.

HTML:

<div class="container"></div>

JavaScript:

const newElement = document.createElement("div");
newElement.textContent = "Я новый элемент!";
newElement.classList.add("new-item");

const container = document.querySelector(".container");
container.appendChild(newElement);

insertBefore(newElement, referenceElement)

Вставляет новый элемент перед указанным элементом.

HTML:

<div class="container">
  <div class="existing-element">Я уже существую</div>
</div>

JavaScript:

const parent = document.querySelector(".container");
const referenceElement = document.querySelector(".existing-element");

const newElement = document.createElement("p");
newElement.textContent = "Я новый перед существующим!";
parent.insertBefore(newElement, referenceElement);

removeChild(element)

Удаляет элемент из родителя.

HTML:

<div class="container">
  <div class="existing-element">Я уже существую</div>
</div>

JavaScript:

const parent = document.querySelector(".container");
const referenceElement = document.querySelector(".existing-element");

parent.removeChild(referenceElement);

Обработка событий

addEventListener(eventName, callback)

Добавляет обработчик события на элемент.

HTML:

<button id="my-button">Нажми меня</button>

JavaScript:

const button = document.querySelector("#my-button");
button.addEventListener("click", () => {
  console.log("Я нажал меня!");
});

removeEventListener(eventName, callback)

Удаляет обработчик события с элемента.

HTML:

<button id="my-button">Нажми меня</button>

JavaScript:

const button = document.querySelector("#my-button");
button.removeEventListener("click", () => {
  console.log("Я нажал меня!");
});

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

style.cssText

Изменяет стили элемента с помощью CSS-строки.

HTML:

<div class="box" style="color: red; font-size: 20px;">Я коробка</div>

JavaScript:

const box = document.querySelector(".box");
box.style.cssText = "color: green; font-size: 30px;";

style.setProperty(name, value)

Изменяет стиль элемента с помощью CSS-свойства.

HTML:

<div class="box" style="color: red; font-size: 20px;">Я коробка</div>

JavaScript:

const box = document.querySelector(".box");
box.style.setProperty("color", "green");
box.style.setProperty("font-size", "30px");

style.removeProperty(name)

Удаляет стиль элемента с помощью CSS-свойства.

HTML:

<div class="box" style="color: red; font-size: 20px;">Я коробка</div>

JavaScript:

const box = document.querySelector(".box");
box.style.removeProperty("color");
box.style.removeProperty("font-size");

style.getPropertyValue(name)

Возвращает значение стиля элемента с помощью CSS-свойства.

HTML:

<div class="box" style="color: red; font-size: 20px;">Я коробка</div>

JavaScript:

const box = document.querySelector(".box");
console.log(box.style.getPropertyValue("color")); // "red"
console.log(box.style.getPropertyValue("font-size")); // "20px"

Делегирование событий

Если у нас много кнопок, лучше вешать обработчик на общий родитель.

HTML:

<ul class="list">
  <li class="list-item">Кликни 1</li>
  <li class="list-item">Кликни 2</li>
  <li class="list-item">Кликни 3</li>
</ul>

JavaScript:

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

list.addEventListener("click", function (event) {
  if (event.target.classList.contains("list-item")) {
    alert("Вы нажали на: " + event.target.textContent);
  }
});