Работа с DOM - Основы веб-разработки - ADivC

Что такое DOM

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

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

Представьте кукольный театр. HTML — это декорации и куклы на сцене. CSS — это краски и свет. JavaScript — это кукловод, который двигает кукол, меняет декорации, открывает занавес. DOM — это схема сцены, по которой кукловод ориентируется.

Посмотрите на страницу ADC. В секции «Наш ADC» видите картинку студентов, текст про историю и чёрную кнопку «Посмотреть»? Кликаете кнопку, переходите на страницу history.html с полной историей сообщества. Это работа JavaScript через DOM.

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

Создайте HTML для секции с кнопкой:

HTML

<button class="button-click" id="historyBtn">Посмотреть</button>

Кнопке присвоен ID historyBtn. ID это уникальный идентификатор элемента. По нему JavaScript найдёт кнопку в DOM. Откройте script.js и напишите:

JAVASCRIPT

// Ищем кнопку в DOM по ID
const historyBtn = document.getElementById("historyBtn");

// Вешаем обработчик клика
historyBtn.addEventListener("click", function() {
  // При клике переходим на другую страницу
  window.location.href = "history.html";
});

document.getElementById('historyBtn') ищет элемент с ID historyBtn. Возвращает его как объект. Сохраняете объект в переменную historyBtn. Теперь через эту переменную управляете кнопкой.

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

addEventListener('click', function () {…}) вешает обработчик события. Событие это действие пользователя. Клик мышью, нажатие клавиши, прокрутка страницы. 'click' означает клик. Когда пользователь кликает кнопку, выполняется функция внутри.

window.location.href = 'history.html' меняет адрес текущей страницы. Браузер переходит на history.html. Как будто пользователь кликнул ссылку. Это встроенный объект window, который управляет окном браузера.

Сохраните файл. Обновите страницу. Кликните кнопку «Посмотреть». Страница перешла на history.html? Значит JavaScript нашёл элемент в DOM и отреагировал на клик.

Можете добавить сообщение в консоль для отладки:

JAVASCRIPT

const historyBtn = document.getElementById("historyBtn");

historyBtn.addEventListener("click", function() {
  console.log('Кнопка "Посмотреть" нажата');
  // window.location.href = "history.html";
});

Кликните кнопку. Откройте консоль перед переходом. Видите сообщение? Это подтверждает, что обработчик сработал. Полезно для проверки логики. Тут мы закомментировали сам переход, иначе переключилась бы страница и консоль обновилась.

Работа с формой

Теперь форма. На странице ADC видите форму «Записаться на мероприятие»? Три поля: Имя, Фамилия, Номер телефона. Кнопка «Отправить». Пользователь заполняет поля, нажимает кнопку, JavaScript проверяет данные.

Создайте HTML формы:

HTML

<form class="contact-form" id="eventForm">
  <input type="text" placeholder="Имя" class="form-input" id="nameInput" required>
  <input type="text" placeholder="Фамилия" class="form-input" id="surnameInput" required>
  <input type="tel" placeholder="Номер телефона" class="form-input" id="phoneInput" required>
  <button type="submit" class="submit-button">Отправить</button>
</form>

Форме присвоен ID eventForm. Каждому полю свой ID: nameInput, surnameInput, phoneInput. Атрибут required делает поля обязательными. Браузер покажет подсказку, если поле пустое.

Атрибут type="submit" делает кнопку кнопкой отправки. При клике форма пытается отправиться. По умолчанию страница перезагрузится. Но можете перехватить это через JavaScript.

Откройте script.js:

JAVASCRIPT

// Находим форму в DOM
const eventForm = document.getElementById("eventForm");

// Вешаем обработчик отправки формы
eventForm.addEventListener("submit", function(event) {
  // Останавливаем стандартное поведение (перезагрузку страницы)
  event.preventDefault();

  // Получаем значения полей из DOM
  const name = document.getElementById("nameInput").value;
  const surname = document.getElementById("surnameInput").value;
  const phone = document.getElementById("phoneInput").value;

  // Проверяем, что все поля заполнены
  if (name === '' || surname === '' || phone === '') {
    alert("Пожалуйста, заполните все поля");
    return;
  }

  // Выводим данные в консоль для проверки
  console.log("Регистрация:");
  console.log("Имя:", name);
  console.log("Фамилия:", surname);
  console.log("Телефон:", phone);

  // Показываем пользователю сообщение об успехе
  alert("Спасибо за регистрацию! Мы свяжемся с вами.");

  // Очищаем форму после отправки
  eventForm.reset();
});

Валидация формы

addEventListener('submit', function (event) {…}) вешает обработчик на событие отправки формы. submit срабатывает, когда нажимаете кнопку с type="submit" или жмёте Enter в поле.

event.preventDefault() останавливает стандартное поведение браузера. Без этой строки страница перезагрузится. С ней остаётесь на странице, и JavaScript обрабатывает данные.

document.getElementById('nameInput').value получает значение поля ввода. .value это свойство DOM-элемента, которое хранит текст, введённый пользователем. Сохраняете значения в переменные.

if (name === '' || surname === '' || phone === '') проверяет, пустые ли поля. === это строгое сравнение. || это логическое ИЛИ. Если хотя бы одно поле пустое, показываете alert() с предупреждением и выходите через return.

Если все поля заполнены, выводите данные в консоль. Показываете пользователю окно с благодарностью через alert(). Вызываете eventForm.reset(), который очищает все поля формы.

Сохраните. Обновите страницу. Попробуйте отправить пустую форму. Появилось предупреждение? Заполните поля, отправьте. Появилось «Спасибо за регистрацию»? Откройте консоль, видите данные? Форма очистилась? JavaScript работает с DOM.

Улучшение проверки

Можете улучшить проверку. Например, проверить длину телефона:

JAVASCRIPT

if (phone.length < 10) {
  alert("Введите корректный номер телефона (минимум 10 цифр)");
  return;
}

Или проверить, что имя не содержит цифр:

JAVASCRIPT

if (/\d/.test(name)) {
  alert("Имя не должно содержать цифры");
  return;
}

/\d/ — это регулярное выражение, которое ищет цифры. .test(name) проверяет, есть ли цифры в строке. Если есть, выводите предупреждение.

Заключение

Запомните главное. DOM — это дерево объектов, представляющее HTML. document.getElementById() находит элемент по ID. document.querySelectorAll() находит все элементы по селектору CSS. addEventListener() вешает обработчик события на элемент. event.preventDefault() останавливает стандартное поведение браузера. .value получает значение поля ввода. .style изменяет CSS-свойства элемента через JavaScript.

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

Что такое DOM?

Язык программирования для веб-разработки

Объектная модель документа — представление HTML в виде дерева объектов

Инструмент для отладки JavaScript

Библиотека для работы с базами данных

Что делает метод event.preventDefault()?

Удаляет элемент со страницы

Останавливает стандартное поведение браузера

Проверяет валидность формы

Очищает поля формы

Как получить значение поля ввода с ID 'username'?