Управление элементами DOM

Free Preview
Продолжительность: 15 мин

Мы умеем находить элементы на странице. Теперь разберёмся, что с ними можно делать.

Текстовое содержимое

Самое частое действие — прочитать или изменить текст внутри элемента. Для этого есть два свойства.

textContent — текстовое содержимое элемента без HTML-тегов. Это безопасный способ установить текст:

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

console.log(title.textContent); // 'Санкт-Петербург'
title.textContent = 'Северная столица'; // изменить текст
js

innerHTML — содержимое элемента вместе с HTML-разметкой. Позволяет читать и устанавливать HTML как строку:

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

console.log(card.innerHTML);
// '<h3>Эрмитаж</h3><p>Один из крупнейших музеев мира.</p>'

card.innerHTML = '<h3>Петергоф</h3><p>Дворцово-парковый ансамбль.</p>';
js

Будьте осторожны с innerHTML: если вставляете данные, полученные от пользователя, никогда не вставляйте их напрямую через innerHTML — это открывает уязвимость XSS. Для пользовательских данных всегда используйте textContent.

Стили

Через свойство style можно читать и задавать CSS-стили напрямую. CSS-свойства записываются в camelCase:

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

hero.style.backgroundColor = '#1a1a2e';
hero.style.color = '#ffffff';
hero.style.padding = '40px';
js

Такой подход удобен для динамических вычислений — например, когда нужно задать ширину, которую мы узнаём только в момент выполнения. Но для большинства задач лучше управлять внешним видом через классы, а не через style напрямую — это чище и придерживается разделения ответственности: HTML/CSS отвечают за внешний вид, JS — за логику.

Классы

Самый правильный подход — добавлять и убирать CSS-классы. Для этого у каждого элемента есть свойство classList с набором удобных методов:

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

card.classList.add('featured');       // добавить класс
card.classList.remove('featured');    // убрать класс
card.classList.toggle('active');      // добавить если нет, убрать если есть
card.classList.contains('featured');  // проверить наличие → true / false
card.classList.replace('old', 'new'); // заменить один класс другим
js

Метод toggle особенно удобен для переключения состояний — например, открытия/закрытия меню:

const burger = document.querySelector('.burger');
const nav = document.querySelector('nav');

// при клике переключаем класс — стили пишем в CSS
burger.addEventListener('click', () => {
  nav.classList.toggle('open');
});
js

Обработчики событий (addEventListener) — это тема следующего урока, сейчас просто обратите внимание на подход.

Атрибуты

Для работы с HTML-атрибутами (src, href, alt, data-* и другими) используется пара методов:

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

link.getAttribute('href');           // получить значение атрибута
link.setAttribute('href', 'https://hermitage.ru'); // установить
link.removeAttribute('target');      // удалить атрибут
link.hasAttribute('target');         // проверить наличие → true / false
js

Стандартные атрибуты (id, href, src, alt) доступны и как прямые свойства элемента:

const img = document.querySelector('img');
console.log(img.src);    // то же что getAttribute('src')
img.alt = 'Эрмитаж';    // то же что setAttribute('alt', 'Эрмитаж')
js

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

Чтобы добавить новый элемент на страницу, нужно его создать через document.createElement, заполнить и вставить в DOM:

// создаём элемент
const newCard = document.createElement('div');
newCard.classList.add('card');
newCard.innerHTML = '<h3>Невский проспект</h3><p>Главная улица города.</p>';

// находим контейнер и добавляем карточку в конец
const grid = document.querySelector('.attractions .grid');
grid.append(newCard);
js

Несколько методов для вставки:

parent.append(element);     // добавить в конец
parent.prepend(element);    // добавить в начало
element.remove();           // удалить элемент из DOM
parent.replaceChild(newEl, oldEl); // заменить один элемент другим
js

Размеры и положение элемента

Иногда нужно узнать размер элемента или его координаты на странице. Метод getBoundingClientRect() возвращает объект с нужными данными:

const hero = document.querySelector('.hero');
const rect = hero.getBoundingClientRect();

console.log(rect.width);  // ширина
console.log(rect.height); // высота
console.log(rect.top);    // расстояние от верха области просмотра
console.log(rect.left);   // расстояние от левого края
js

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

Практика

Попробуйте прямо в консоли браузера на любой странице:

// найти заголовок и изменить его
document.querySelector('h1').textContent = 'Изменено из консоли!';

// добавить класс к элементу
document.querySelector('body').classList.add('dark');

// создать и добавить параграф
const p = document.createElement('p');
p.textContent = 'Добавлено через JavaScript';
document.body.append(p);
js

Консоль браузера — отличная площадка для экспериментов с DOM без создания отдельных файлов.

В следующем уроке научимся реагировать на действия пользователя — познакомимся с событиями браузера.

Предыдущий урокЗавершить