DOM и события — JavaScript

В этом уроке ты узнаешь

Объяснять, что такое DOM
Находить элементы через querySelector и менять их текст, стиль и классы
Создавать новые элементы и добавлять их на страницу
Реагировать на клики, ввод и отправку формы с помощью addEventListener

В интернет-магазине ты нажимаешь «В корзину», и число на значке корзины сверху сразу увеличивается. Страница не перезагружается — JavaScript просто меняет её часть. Делает он это с помощью DOM. Все примеры в этом уроке живые: запускай их, нажимай на кнопки, меняй код.

Что такое DOM?

Определение

DOM (Document Object Model)

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

Text

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        └── ul
            ├── li
            └── li

DOM-дерево страницы с заголовком и списком из двух пунктов. Корень дерева — объект document.

Поиск и изменение элементов

document.querySelector() принимает CSS-селектор и возвращает первый подходящий элемент: '#greeting' ищет по id, '.note' — по классу, 'h2' — по тегу. Если нужны все подходящие элементы, используют querySelectorAll(). У найденного элемента свойство textContent управляет текстом, style — стилями, а classList — CSS-классами.

HTML· Измени код и запусти снова

<style>
  .highlight { background: #ffe58a; }
</style>

<h2 id="greeting">Hello!</h2>
<p class="note">First note</p>
<p class="note">Second note</p>

<script>
  const greeting = document.querySelector('#greeting');
  greeting.textContent = 'Hello, Baku!';
  greeting.style.color = 'teal';

  const notes = document.querySelectorAll('.note');
  notes.forEach((note, i) => {
    note.textContent = `Note number ${i + 1}`;
    note.classList.add('highlight');
  });
</script>

Предпросмотр

Поменяй цвет, напиши toggle вместо add и сравни результат.

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

document.createElement('li') создаёт новый элемент, но на странице его пока нет. Он появится, когда ты добавишь его внутрь существующего элемента с помощью append(). Чтобы удалить элемент, вызывают element.remove(). Так можно построить целый список из данных массива:

HTML· Измени код и запусти снова

<h3>Cities to visit</h3>
<ul id="cities"></ul>

<script>
  const cities = ['Baku', 'Ganja', 'Shaki', 'Lankaran'];
  const list = document.querySelector('#cities');

  for (const city of cities) {
    const item = document.createElement('li');
    item.textContent = city;
    list.append(item);
  }
</script>

Предпросмотр

События

Событие (event) — это то, что происходит на странице: клик, нажатие клавиши, ввод текста в поле, отправка формы. element.addEventListener('click', функция) говорит браузеру: «Когда на этот элемент кликнут, вызови эту функцию». Такую функцию называют обработчиком события.

HTML· Измени код и запусти снова

<button id="like">Like</button>
<span id="count">0</span> likes

<script>
  let likes = 0;
  const button = document.querySelector('#like');
  const count = document.querySelector('#count');

  button.addEventListener('click', () => {
    likes++;
    count.textContent = likes;
  });
</script>

Предпросмотр

Нажми на кнопку несколько раз — счётчик растёт с каждым кликом.

Событие	Когда происходит
`click`	по элементу кликнули
`input`	текст в поле меняется — на каждом символе
`submit`	форма отправляется
`keydown`	нажата клавиша
`mouseover`	мышь наведена на элемент

Функция-обработчик получает аргументом объект события. Его метод preventDefault() отменяет стандартное поведение браузера — например, перезагрузку страницы при отправке формы. В примере ниже событие input сразу показывает набранный текст, а submit выводит приветствие.

HTML· Измени код и запусти снова

<form id="form">
  <input id="name" placeholder="Your name">
  <button>Say hi</button>
</form>
<p id="preview">Start typing...</p>
<p id="result"></p>

<script>
  const input = document.querySelector('#name');
  const preview = document.querySelector('#preview');
  const result = document.querySelector('#result');

  input.addEventListener('input', () => {
    preview.textContent = `Typing: ${input.value}`;
  });

  document.querySelector('#form').addEventListener('submit', (event) => {
    event.preventDefault();
    result.textContent = `Hello, ${input.value || 'stranger'}!`;
  });
</script>

Предпросмотр

Мини-проект: список дел

Теперь соберём всё вместе: впиши задачу, нажми «Add» — в списке появится новый пункт. Кликни по пункту, и classList.toggle отметит его как выполненный, а повторный клик снимет отметку.

HTML· Измени код и запусти снова

<style>
  li { cursor: pointer; }
  .done { text-decoration: line-through; color: gray; }
</style>

<input id="task" placeholder="New task">
<button id="add">Add</button>
<ul id="list"></ul>

<script>
  const input = document.querySelector('#task');
  const list = document.querySelector('#list');

  document.querySelector('#add').addEventListener('click', () => {
    const text = input.value.trim();
    if (!text) return;
    const item = document.createElement('li');
    item.textContent = text;
    item.addEventListener('click', () => item.classList.toggle('done'));
    list.append(item);
    input.value = '';
  });
</script>

Предпросмотр

Доработай сам: добавь к каждому пункту кнопку удаления (item.remove()).

Задание

В реальных проектах DOM только показывает данные, а логика живёт в обычных функциях. Напиши логику списка дел без DOM: toggle(index) переключает значение done задачи, а render() выводит каждую задачу как [x] текст или [ ] текст, а в конце — итог вида Done: 1 of 3.

Задание · JavaScript· Измени код и запусти снова

const todos = [
  { text: 'Buy bread', done: false },
  { text: 'Learn the DOM', done: false },
  { text: 'Walk the dog', done: false },
];

function toggle(index) {
  // flip todos[index].done
}

function render() {
  // print [x] text or [ ] text for every task, then Done: N of M
}

toggle(0);
toggle(2);
toggle(2);
render();

▸ Ожидаемый результат

[x] Buy bread
[ ] Learn the DOM
[ ] Walk the dog
Done: 1 of 3

Главное

DOM — это дерево объектов, которое браузер строит из HTML; его корень — document.
querySelector возвращает первый подходящий элемент, querySelectorAll — все.
textContent, style и classList меняют текст, стили и классы элемента.
createElement создаёт элемент, append добавляет его на страницу, remove удаляет.
addEventListener назначает обработчик события; preventDefault() отменяет стандартное поведение браузера.

Проверь себя

Вопросов: 10. Каждый правильный ответ приносит XP.

1 / 10

Что такое DOM?