Frontend Academy · Урок

Изменение содержимого: textContent, innerHTML, classList

Читайте и изменяйте текстовое содержимое элементов, вставляйте HTML, а также программно переключайте, добавляйте и удаляйте классы CSS.

«Изменение содержимого: textContent, innerHTML, classList» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Чтение и запись textContent

element.textContent получает или задаёт обычный текст элемента вместе со всеми дочерними элементами. Это безопасно: HTML никогда не разбирается, поэтому установка значения из пользовательского ввода не создаёт уязвимостей XSS.

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — используйте с осторожностью

element.innerHTML получает или задаёт HTML-разметку внутри элемента. Это удобно, но опасно при использовании пользовательского ввода: HTML разбирается, и могут выполняться скрипты (XSS). Никогда не устанавливайте innerHTML, используя несанитизированные пользовательские данные.

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText и textContent

innerText возвращает только видимый текст (учитывает CSS display:none) и запускает перерасчёт макета. textContent возвращает весь текст, включая скрытый, и работает быстрее. Предпочитайте textContent, если Вам специально не требуется поведение для видимого текста.

classList — добавление и удаление классов

element.classList предоставляет методы для изменения классов CSS без работы со всей строкой className. add(), remove(), toggle(), contains(), replace().

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

toggle с параметром принудительного состояния

classList.toggle('class', condition) добавляет класс, если condition истинно, и удаляет его, если condition ложно. Это удобный способ синхронизировать класс с логическим состоянием.

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

Чтение и установка атрибутов

element.getAttribute('attr') считывает любой атрибут. element.setAttribute('attr', value) устанавливает его. element.removeAttribute('attr') удаляет его. element.hasAttribute('attr') проверяет его наличие.

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

Атрибуты data-*

Пользовательские атрибуты data-* хранят дополнительные данные в элементах, не изменяя DOM. Обращайтесь к ним через element.dataset, используя camelCase.

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

Свойство стиля

element.style.propertyName задаёт встроенные стили. Для свойств с дефисами используйте camelCase. Предпочитайте переключение классов CSS установке встроенных стилей — так стили остаются в файлах CSS, где им и место.

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

Чтение вычисленных стилей

getComputedStyle(element) возвращает фактически применённые стили после каскадирования, а не только встроенные стили. Используйте его, чтобы читать стили, заданные классами CSS или используемые браузером по умолчанию.

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

Изменение тегов title и meta

Заголовок документа (вкладки браузера) можно в любой момент изменить с помощью document.title = 'New Title'. Для одностраничных приложений это делает взаимодействие с пользователем удобнее при переходе между представлениями.

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

element.scrollIntoView({ behavior: 'smooth' }) плавно прокручивает страницу до элемента. Это идеально подходит для навигации к разделам и выделения ошибок проверки в формах.

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

Быстрая проверка

Какое свойство следует использовать, чтобы безопасно отображать текст, предоставленный пользователем, в DOM без риска XSS?

Повторение: изменение DOM

textContent безопасно устанавливает обычный текст. innerHTML устанавливает HTML и опасен при использовании пользовательского ввода. classList.add/remove/toggle удобно управляет классами CSS. setAttribute/dataset управляют атрибутами HTML. Предпочитайте переключение классов встроенным стилям. getComputedStyle считывает итоговые применённые стили.

Часто задаваемые вопросы

Урок «Изменение содержимого: textContent, innerHTML, classList» бесплатный?

Да — полный текст урока «Изменение содержимого: textContent, innerHTML, classList» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Изменение содержимого: textContent, innerHTML, classList»?

Читайте и изменяйте текстовое содержимое элементов, вставляйте HTML, а также программно переключайте, добавляйте и удаляйте классы CSS. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Изменение содержимого: textContent, innerHTML, classList»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

querySelector и querySelectorAll
addEventListener и объект события
Изменение содержимого: textContent, innerHTML, classList
Создание и добавление элементов

← Назад к Frontend Academy