Что такое DOM

Браузер превращает HTML в дерево объектов — DOM. Каждый тег становится узлом, у которого есть свойства и методы. JavaScript читает и меняет это дерево, а браузер перерисовывает страницу.

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

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

querySelector возвращает первый подходящий элемент или null. querySelectorAll — коллекцию (NodeList), по ней можно пройтись forEach, но не map. Старые методы getElementById и getElementsByClassName работают, но единый синтаксис с CSS-селекторами читается проще.

Чтение и изменение

• Текст: el.textContent — безопасно, вставляет как текст.
• HTML: el.innerHTML — опасно при пользовательских данных, это XSS.
• Классы: el.classList.add("active"), toggle, remove.
• Атрибуты: el.setAttribute("aria-expanded", "true").
• Стили: el.style.display = "none" — лучше через класс, а не инлайн.

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

const li = document.createElement("li");
li.textContent = "Новый пункт";
list.append(li);

Для нескольких элементов собирайте их в DocumentFragment и вставляйте один раз — иначе браузер пересчитает вёрстку на каждой вставке.

События

btn.addEventListener("click", (e) => {
  e.preventDefault();
  console.log("нажато");
});

Частые события: click, input, change, submit, keydown, scroll. Для отправки формы слушайте submit на форме, а не click на кнопке — тогда работает и отправка с клавиатуры.

Делегирование

Вместо обработчика на каждой кнопке — один на контейнере. Событие всплывает, и по e.target видно, что именно нажали:

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (item) item.classList.toggle("done");
});

Это работает и для элементов, добавленных позже — их обработчики подключать не нужно.

Частые ошибки

• Элемент ещё не существует. Скрипт без defer в head получает null.
• innerHTML с пользовательским вводом. Прямой путь к XSS.
• Обработчик внутри цикла. Создаёт десятки функций; делегирование дешевле.
• Забытый preventDefault. Форма перезагружает страницу, и скрипт «не срабатывает».

Нужен сайт, а не статья?

Напишу фронтенд без лишних зависимостей: интерактив, формы, запросы к API. С 2009 года, по договору, с поддержкой после запуска.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: JavaScript с нуля, методы массивов, примеры HTML.