DOM и события: JavaScript на странице

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

HTML становится деревом объектов

Браузер читает HTML и строит DOM (Document Object Model, объектная модель документа). У элементов появляются объекты с данными и действиями: можно прочитать текст, заменить его или изменить атрибут. Вложенность сохраняется: кнопка внутри body остается его дочерним элементом. Следующий пример – это фрагмент файла index.html, который помещают внутрь тега body.

<p id="message">Пока ничего не произошло.</p>
<button id="hello" type="button">Поздороваться</button>

Переменная document предоставляет доступ к документу открытой страницы. querySelector ищет первый элемент по CSS-селектору. Запись #message выбирает элемент с id="message", как в CSS:

Для HTML выше запишите в подключенный main.js:

const message = document.querySelector("#message");
message.textContent = "JavaScript уже изменил текст.";

message теперь содержит объект элемента. Его свойство textContent хранит текст. Присваивание нового значения заменяет содержимое элемента обычным текстом. HTML-теги внутри строки при этом не превращаются в разметку – это безопасный способ показать текст пользователя.

Вложенная разметка тоже будет заменена: если внутри абзаца было strong, присваивание textContent удалит этот элемент вместе с прежним содержимым. Поэтому для изменяемого числа удобно выделить отдельный output или span.

Если элемент может отсутствовать на некоторых страницах, проверяйте результат поиска:

Замените main.js следующим кодом. HTML с message оставьте прежним.

const message = document.querySelector("#message");
 
if (message !== null) {
  message.textContent = "Элемент найден.";
}

Событие запускает функцию

Событие – сообщение браузера о действии: нажатии, вводе текста, отправке формы. Для кнопки подходит click: оно возникает и при клике мышью, и при стандартной активации кнопки с клавиатуры.

addEventListener связывает имя события с функцией. Эта функция называется обработчиком события: браузер вызовет ее, когда действие произойдет.

Для HTML с кнопкой «Поздороваться» замените main.js этим кодом:

const message = document.querySelector("#message");
const button = document.querySelector("#hello");
 
function sayHello() {
  message.textContent = "Привет! Нажатие обработано.";
}
 
button.addEventListener("click", sayHello);

Здесь передается sayHello, без скобок. Запись sayHello() сразу вызвала бы функцию при загрузке страницы. Нам нужно передать саму функцию, чтобы браузер запустил ее позже. Стрелочная функция тоже подойдет: button.addEventListener("click", () => { ... }).

Обработчик может получить объект события первым параметром. Например, event.currentTarget указывает на элемент, на котором зарегистрирован обработчик:

Замените main.js следующим кодом. HTML с кнопкой hello оставьте прежним.

const button = document.querySelector("#hello");
 
button.addEventListener("click", (event) => {
  console.log(event.currentTarget); // Кнопка hello.
});

Интерактивный пример: количество товаров

Нажимайте кнопки и сравнивайте поведение с кодом. Это обычные HTML и JavaScript, без библиотек. HTML ниже вставьте в body, а JavaScript – в подключенный файл main.js. Подключение остается прежним: <script src="main.js" defer></script> внутри head.

<p>Товаров: <output id="count">0</output></p><button id="remove" type="button" disabled>Убрать</button><button id="add" type="button">Добавить</button><button id="reset" type="button">Сбросить</button>

const output = document.querySelector("#count");const add = document.querySelector("#add");const remove = document.querySelector("#remove");const reset = document.querySelector("#reset");let count = 0;
function render() {  output.textContent = count;  remove.disabled = count === 0;}
add.addEventListener("click", () => {  count++;  render();});
remove.addEventListener("click", () => {  if (count === 0) return;  count--;  render();});
reset.addEventListener("click", () => {  count = 0;  render();});
render();

Что происходит после нажатия:

1. Браузер вызывает обработчик click.
2. Обработчик меняет count.
3. Функция render («показать») обновляет текст и состояние кнопки.

disabled – логическое свойство кнопки. При значении true кнопка недоступна; при false доступна. Внутри обработчика уменьшения есть и проверка count === 0, чтобы количество не стало отрицательным. Отключение кнопки помогает пользователю, а проверка защищает правило программы.

Названия render, count, add мы выбрали сами. Слова querySelector, textContent и addEventListener относятся к браузерному интерфейсу: их нельзя переименовать, ожидая прежнего поведения.

Попробуйте самостоятельно: добавьте строку «Итого», стоимость одного товара 250 и обновляйте сумму при каждом нажатии. Не считывайте ее обратно из текста страницы: рассчитывайте через count * price. Затем добавьте ограничение в 10 товаров и отключайте кнопку добавления на верхней границе.

Официальные справочники: введение в DOM, поиск элемента, события.