Когда мы создаем веб-страницу, мы не просто пишем HTML-разметку. Мы создаем структуру, с которой пользователь будет взаимодействовать. Но иногда нам нужно изменить эту структуру или внешний вид элементов после того, как страница уже загружена. И вот тут на помощь приходит DOM (Document Object Model).
DOM - это модель, которая представляет структуру документа как дерево объектов. И когда мы используем JavaScript, мы можем манипулировать этим деревом: менять текст, добавлять или удалять элементы, изменять стили и многое другое.
В этой статье я поделюсь с вами, как именно с помощью Vanilla JavaScript можно изменять структуру и стили элементов на веб-странице. Мы разберем несколько простых примеров, которые помогут вам понять, как это работает.
1. Что такое DOM и как с ним работать?
Прежде чем начать, важно понять, что такое DOM. Это абстракция, которая позволяет JavaScript взаимодействовать с HTML-документом. Внутри документа HTML представляется в виде дерева, где каждый элемент (тег) - это отдельный объект, с которым можно работать.
Например, если у нас есть такой HTML:
В DOM эта структура представлена как дерево объектов, где теги <h1>, <p>, и <button> - это элементы, с которыми мы можем работать.
2. Изменение текста и контента элементов
Давайте начнем с простого примера: изменим текст внутри элемента при нажатии на кнопку. Для этого нам нужно получить элемент с помощью JavaScript и изменить его содержимое.
Файл: index.html
Файл: script.js
Объяснение:
Мы используем document.getElementById() для получения ссылки на элемент с id header (это наш <h1>).
Добавляем обработчик событий click на кнопку. Когда пользователь кликает на кнопку, текст внутри заголовка меняется на "Текст был изменен!".
3. Изменение стилей элементов
Теперь давайте сделаем немного интереснее: изменим стиль элемента на странице с помощью JavaScript. Например, при нажатии на кнопку мы будем менять цвет фона заголовка.
Файл: script.js (обновленный)
Объяснение:
Мы добавляем стиль через свойство style в JavaScript. В примере меняем цвет фона на желтый и текст на красный.
Когда кнопка нажата, стиль заголовка меняется, а также его текст.
4. Добавление и удаление элементов
Теперь давайте рассмотрим более сложный пример. Мы будем добавлять новый элемент на страницу динамически. Например, добавим новый абзац каждый раз, когда нажимаем на кнопку.
Файл: index.html
Файл: script.js
Объяснение:
Мы создаем новый элемент с помощью document.createElement('p').
Затем добавляем этот элемент в существующий блок с помощью appendChild().
Каждый раз, когда пользователь нажимает кнопку, создается новый параграф и добавляется в контейнер.
5. Удаление элементов
Также можно удалить элементы с страницы. Для этого используется метод removeChild().
Файл: script.js (добавляем удаление)
Объяснение:
Мы находим последний элемент с помощью lastElementChild.
Если такой элемент существует, то удаляем его с помощью removeChild().
Заключение
Манипуляции с DOM - это неотъемлемая часть работы с веб-страницами, и с помощью JavaScript мы можем легко изменять структуру и стиль элементов на странице. Сегодня мы научились изменять текст, стили, добавлять новые элементы и даже удалять их. Эти навыки - основа для создания интерактивных, динамичных и удобных веб-страниц.
Как и в любом другом аспекте разработки, практиковаться - ключ к успеху. Экспериментируйте с различными методами DOM-манипуляций, создавайте свои интерфейсы, добавляйте интересные эффекты. И помните: JavaScript даёт вам всю силу для того, чтобы делать вашу страницу живой и интерактивной.
📖 Читайте также:
→ JS для новичков: создаём динамическую страницу
→ Как использовать JavaScript для создания модальных окон и всплывающих уведомлений
→ Основы работы с событиями в JavaScript: от кликов до кастомных событий