Кодик
Начать бесплатно

DOM манипуляции: изменяем страницу динамически

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

JSРазработка

6 мин

Что такое DOM?

Представьте HTML-документ как семейное дерево. У каждого элемента есть родитель, могут быть дети и соседи. DOM — это способ браузера организовать все элементы страницы в виде объектов JavaScript, с которыми можно работать.

<!DOCTYPE html>
<html>
  <body>
    <h1>Привет, мир!</h1>
    <p>Это параграф</p>
  </body>
</html>

В этом примере <body> — родитель для <h1> и <p>, а они — его дети.

Поиск элементов на странице

Прежде чем что-то менять, нужно найти элемент. Есть несколько способов:

// Поиск по ID
const header = document.getElementById('main-header');

// Поиск по классу (вернёт коллекцию элементов)
const buttons = document.getElementsByClassName('btn');

// Поиск по тегу
const paragraphs = document.getElementsByTagName('p');

// Современные методы (самые популярные!)
const firstButton = document.querySelector('.btn'); // первый элемент
const allButtons = document.querySelectorAll('.btn'); // все элементы

Методы querySelector и querySelectorAll — ваши лучшие друзья. Они работают с любыми CSS-селекторами и очень удобны.

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

Теперь, когда мы нашли элемент, давайте что-нибудь с ним сделаем:

const title = document.querySelector('h1');

// Изменить текст
title.textContent = 'Новый заголовок';

// Изменить HTML (можно вставить теги)
title.innerHTML = 'Заголовок с <span>акцентом</span>';

Важно: используйте textContent для обычного текста и innerHTML только когда действительно нужно вставить HTML. Это безопаснее.

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

Атрибуты элементов тоже легко менять:

const link = document.querySelector('a');

// Получить атрибут
const href = link.getAttribute('href');

// Установить атрибут
link.setAttribute('href', 'https://example.com');

// Удалить атрибут
link.removeAttribute('target');

// Работа с классами
link.classList.add('active');
link.classList.remove('disabled');
link.classList.toggle('highlighted'); // переключить класс

Изменение стилей

CSS-стили можно менять прямо из JavaScript:

const box = document.querySelector('.box');

// Изменить один стиль
box.style.backgroundColor = 'blue';
box.style.width = '200px';

// Лучший способ — через классы
box.classList.add('big-box');

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

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

Можно создавать элементы с нуля и добавлять их на страницу:

// Создать элемент
const newDiv = document.createElement('div');

// Добавить содержимое
newDiv.textContent = 'Я новый элемент!';
newDiv.classList.add('message');

// Добавить на страницу
document.body.appendChild(newDiv); // в конец body

// Или вставить в определённое место
const container = document.querySelector('.container');
container.appendChild(newDiv);

Удаление элементов

Элементы можно удалять:

const oldElement = document.querySelector('.old');

// Современный способ
oldElement.remove();

// Старый способ (работает везде)
oldElement.parentNode.removeChild(oldElement);


Практический пример: список задач

Давайте создадим простое приложение для списка задач. Попробуйте сами:

Мои задачи

Вот код, который делает это приложение работающим:

const input = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');

addBtn.addEventListener('click', function() {
    const taskText = input.value.trim();
    
    if (taskText === '') return;

    // Создаём новый элемент списка
    const li = document.createElement('li');
    li.textContent = taskText;

    // Добавляем возможность отметить задачу
    li.addEventListener('click', function() {
        li.classList.toggle('completed');
    });

    // Кнопка удаления
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Удалить';
    deleteBtn.className = 'delete-btn';
    deleteBtn.addEventListener('click', function(e) {
        e.stopPropagation(); // чтобы не сработал клик по li
        li.remove();
    });

    li.appendChild(deleteBtn);
    taskList.appendChild(li);

    // Очищаем поле ввода
    input.value = '';
});

// Добавление по Enter
input.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        addBtn.click();
    }
});

Полезные советы

Кешируйте элементы. Если используете элемент несколько раз, сохраните его в переменную вместо повторного поиска.

// Плохо
document.querySelector('.box').style.width = '100px';
document.querySelector('.box').style.height = '100px';

// Хорошо
const box = document.querySelector('.box');
box.style.width = '100px';
box.style.height = '100px';

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

Минимизируйте reflow. Частые изменения DOM могут замедлить страницу. Группируйте изменения или используйте DocumentFragment.

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

const element = document.querySelector('.maybe-exists');
if (element) {
    element.textContent = 'Нашли!';
}

Заключение

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

Изучить Python и другие языки можно в Кодике — у нас удобная платформа для обучения с практическими заданиями.

А ещё у нас есть крутой телеграм-канал с дружеским комьюнити, где можно задавать вопросы, делиться опытом и расти вместе с единомышленниками.
Присоединяйтесь!

Комментарии