Урок 21 по JavaScript: Работа с DOM-элементами (для начинающих)

Урок 21: Работа с DOM-элементами в JavaScript’е

21.03.2025 Автор: Максим Габов написал в рубрике Уроки по JavaScript. 0 Комментариев.

Мы продолжаем наш курс по JavaScript для начинающих. Сегодня нас ждет важная тема, это взаимодействие с DOM-элементами. Если вы мечтаете создавать динамические и интерактивные веб-страницы, этот урок станет вашим ключом к успеху. Мы разберем как добавлять, удалять и изменять элементы, управлять классами и атрибутами. А в конце практические задачи, чтобы закрепить знания.

Что такое DOM?

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

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

Создание элемента: createElement()

const newDiv = document.createElement('div');

Добавление элемента в DOM

appendChild(): Добавляет элемент в конец родителя.
insertBefore(): Вставляет элемент перед указанным дочерним элементом.
prepend(): Добавляет элемент в начало родителя.

Пример:

<ul id="list">
  <li>Пункт 1</li>
</ul>

const list = document.getElementById('list');
const newItem = document.createElement('li');
newItem.textContent = 'Пункт 2';

// Добавляем в конец списка
list.appendChild(newItem);

// Вставляем перед первым пунктом
const firstItem = list.querySelector('li');
list.insertBefore(newItem, firstItem);

// Добавляем в начало
list.prepend(newItem);

Удаление элемента: removeChild() и remove()

// Через родителя
list.removeChild(firstItem);

// Напрямую
newItem.remove();

Изменение содержимого и свойств

textContent vs innerHTML

textContent задает или возвращает текстовое содержимое элемента.
innerHTML позволяет работать с HTML-разметкой.

const div = document.querySelector('div');
div.textContent = 'Новый текст'; // Безопасно, но только текст
div.innerHTML = '<strong>Жирный текст</strong>'; // Может содержать HTML

Важно: Используйте textContent, если не нужно вставлять HTML. innerHTML может стать причиной уязвимостей (XSS-атаки), если вставляете пользовательские данные.

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

Классы помогают управлять стилями и состоянием элементов.

Добавление и удаление классов

classList.add(): Добавляет класс.
classList.remove(): Удаляет класс.
classList.toggle(): Переключает класс (добавляет, если его нет, и удаляет, если есть).
classList.contains(): Проверяет наличие класса.

Пример:

const element = document.querySelector('.box');
element.classList.add('active'); // Добавляем класс
element.classList.remove('old-class'); // Удаляем
element.classList.toggle('hidden'); // Скрываем/показываем

if (element.classList.contains('active')) {
  console.log('Элемент активен!');
}

Работа с атрибутами

Атрибуты элементов (например, src, href, data-*) можно изменять через JavaScript.

Методы для работы с атрибутами:

setAttribute(name, value): Устанавливает атрибут.
getAttribute(name): Возвращает значение атрибута.
removeAttribute(name): Удаляет атрибут.

Пример: Изменение изображения

<img id="catImage" src="old-cat.jpg" alt="Котик">

const image = document.getElementById('catImage');
image.setAttribute('src', 'new-cat.jpg'); // Меняем источник
console.log(image.getAttribute('alt')); // "Котик"
image.removeAttribute('alt'); // Удаляем атрибут alt

data-атрибуты

Для работы с data-* атрибутами удобно использовать свойство dataset:

<div id="user" data-id="123" data-role="admin"></div>

const user = document.getElementById('user');
console.log(user.dataset.id); // "123"
user.dataset.role = 'user'; // Меняем data-role на "user"

Практические задачи

Задача 1: Динамический список дел

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

<input type="text" id="taskInput">
<button id="addTask">Добавить</button>
<ul id="taskList"></ul>

<script>
  const input = document.getElementById('taskInput');
  const addButton = document.getElementById('addTask');
  const list = document.getElementById('taskList');

  addButton.addEventListener('click', () => {
    if (input.value.trim()) {
      const li = document.createElement('li');
      li.textContent = input.value;
      list.appendChild(li);
      input.value = '';
    }
  });
</script>

Задача 2: Переключение темной темы

Добавьте кнопку, которая меняет тему страницы.

<button id="themeToggle">Темная тема</button>

<script>
  const toggleButton = document.getElementById('themeToggle');
  toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('dark-theme');
    toggleButton.textContent = document.body.classList.contains('dark-theme') 
      ? 'Светлая тема' 
      : 'Темная тема';
  });
</script>

Задача 3: Валидация формы

Проверяйте, чтобы поле ввода не было пустым.

<form id="myForm">
  <input type="text" id="name" required>
  <button type="submit">Отправить</button>
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', (e) => {
    const nameInput = document.getElementById('name');
    if (nameInput.value.trim() === '') {
      e.preventDefault(); // Отменяем отправку
      nameInput.classList.add('error');
      alert('Заполните поле!');
    }
  });
</script>

Итоги

DOM это программное представление веб-страницы.
Создавайте и управляйте элементами с помощью createElement, appendChild, remove.
Меняйте классы через classList и атрибуты через setAttribute.
Всегда проверяйте пользовательский ввод и избегайте небезопасных операций вроде innerHTML с внешними данными.

Полный курс по JavaScript для начинающих доступен здесь: JavaScript для начинающих

Урок 21: Работа с DOM-элементами в JavaScript’е