Работа с DOM: как изменять элементы страницы с помощью JavaScript

DOM (Document Object Model) — это объектная модель документа, которая представляет структуру HTML-страницы в виде дерева узлов. С помощью JavaScript можно динамически изменять содержимое, стили и структуру страницы, делая её интерактивной и удобной для пользователей. В этой статье расскажем, как находить элементы на странице, менять их содержимое и стили, а также добавлять и удалять узлы.

Как найти элементы на странице

Для работы с элементами сначала нужно их найти. В JavaScript есть несколько популярных методов:

• document.getElementById('id') — ищет элемент по уникальному идентификатору.
• document.getElementsByClassName('class') — возвращает коллекцию элементов с заданным классом.
• document.getElementsByTagName('tag') — возвращает все элементы с указанным тегом.
• document.querySelector('selector') — возвращает первый элемент, подходящий под CSS-селектор.
• document.querySelectorAll('selector') — возвращает все элементы, подходящие под CSS-селектор.

Пример:

const header = document.getElementById('header');
const buttons = document.getElementsByClassName('btn');
const firstButton = document.querySelector('.btn');
const allButtons = document.querySelectorAll('.btn');

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

Чтобы изменить текст или HTML внутри элемента, используют свойства:

• element.textContent — меняет текстовое содержимое (без HTML).
• element.innerHTML — меняет содержимое с HTML-разметкой.

Пример:

const title = document.querySelector('h1');
title.textContent = 'Новый заголовок';

const container = document.querySelector('.container');
container.innerHTML = '<p>Добавлен новый параграф</p>';

Изменение стилей элементов

Для изменения CSS-стилей можно использовать свойство style:

const box = document.querySelector('.box');
box.style.backgroundColor = 'lightblue';
box.style.border = '2px solid black';
box.style.fontSize = '20px';

Если нужно добавить или убрать классы, удобнее использовать свойства класса:

box.classList.add('active');
box.classList.remove('hidden');
box.classList.toggle('visible');

Добавление и удаление узлов

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

Чтобы создать новый элемент и добавить его в DOM, используют методы:

• document.createElement('tag') — создаёт новый элемент.
• parent.appendChild(child) — добавляет дочерний элемент в конец родителя.
• parent.insertBefore(newNode, referenceNode) — вставляет перед указанным узлом.

Пример:

const list = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.textContent = 'Новый пункт списка';
list.appendChild(newItem);

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

Чтобы удалить элемент, можно вызвать метод remove() у самого элемента:

const oldItem = document.querySelector('li.old');
oldItem.remove();

Или удалить через родителя:

const parent = document.querySelector('ul');
const child = document.querySelector('li.old');
parent.removeChild(child);

Итог

Работа с DOM — основа динамического взаимодействия с веб-страницей. С помощью JavaScript можно:

• Находить элементы разными способами
• Менять их текст и HTML
• Изменять стили и классы
• Добавлять новые элементы и удалять существующие

Освоив эти приёмы, вы сможете создавать живые и интерактивные сайты, которые реагируют на действия пользователей и меняются без перезагрузки страницы.