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

Изменение DOM в JavaScript: textContent, innerHTML, setAttribute, classList, style — как менять содержимое, атрибуты и стили найденных элементов.

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

textContent и innerHTML

textContent работает с чистым текстом — HTML-теги будут показаны как текст, что безопасно. innerHTML интерпретирует теги как разметку, но опасен при вставке пользовательского ввода (XSS-уязвимость).

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

// читаем
console.log(heading.textContent); // текст без тегов

// меняем текст
heading.textContent = 'Новый заголовок';

// вставляем HTML-разметку
const container = document.querySelector('.info');
container.innerHTML = '<strong>Важно:</strong> обновлено только что';

// ОСТОРОЖНО: никогда не вставляйте пользовательский ввод через innerHTML!
// container.innerHTML = userInput; // <-- уязвимость XSS!

Атрибуты

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

// чтение
console.log(link.getAttribute('href'));
console.log(link.href);              // удобное свойство для href

// установка
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');

// удаление
link.removeAttribute('target');

// проверка
console.log(link.hasAttribute('href')); // true

classList — управление классами

Управлять классами через строку неудобно. classList предоставляет удобное API.

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

card.classList.add('active');           // добавить класс
card.classList.remove('disabled');      // удалить класс
card.classList.toggle('highlighted');   // есть — убрать, нет — добавить
card.classList.replace('old', 'new');   // заменить

console.log(card.classList.contains('active')); // true

Инлайн-стили через style

Свойство style позволяет задавать CSS прямо из JS. CSS-свойства с дефисом пишутся в camelCase.

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

box.style.backgroundColor = '#ff6b6b';   // background-color → backgroundColor
box.style.fontSize = '20px';
box.style.display = 'flex';

// читать вычисленные стили (включая из CSS-файлов)
const computed = getComputedStyle(box);
console.log(computed.fontSize);

Предпочитайте classList работе с style. CSS-классы легче поддерживать, а управление внешним видом остаётся в CSS-файлах.

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

// создаём новый элемент
const li = document.createElement('li');
li.textContent = 'Новый пункт';
li.classList.add('item');

// добавляем в список
const ul = document.querySelector('ul');
ul.appendChild(li);                // в конец
ul.prepend(li);                    // в начало (альтернатива)

// удаляем элемент
const old = document.querySelector('.outdated');
old?.remove();

Коротко

• textContent — безопасное чтение/запись текста; innerHTML — вставка HTML (осторожно с XSS).
• getAttribute / setAttribute — чтение и запись атрибутов.
• classList.add/remove/toggle/contains — удобное управление CSS-классами.
• createElement + appendChild — создание и вставка новых элементов.