Изменение страницы

Найденный элемент можно изменить: поменять текст, оформление, атрибуты, спрятать или показать. Страница обновляется сразу, без перезагрузки — именно так работают счётчики, переключатели темы и сообщения об ошибках.

Текст

Чтобы заменить текст элемента, запишите новое значение в textContent:

<p id="status">Загрузка…</p>
 
<script>
  const status = document.querySelector('#status');
 
  status.textContent = 'Готово';
</script>

Разметка: innerHTML

Свойство innerHTML хранит HTML-код внутри элемента. Если записать в него строку с тегами, браузер превратит их в настоящие элементы:

<p id="message"></p>
 
<script>
  const message = document.querySelector('#message');
 
  message.innerHTML = 'Заказ <b>оформлен</b>';
</script>

Используйте innerHTML только для разметки, которую написали сами, — почему, рассказано в конце урока.

Классы

Оформление удобнее всего менять через классы. Свойство classList умеет добавлять класс, убирать и проверять:

<style>
  .done { text-decoration: line-through; color: gray; }
</style>
 
<p id="task">Купить молоко</p>
 
<script>
  const task = document.querySelector('#task');
 
  task.classList.add('done');
 
  console.log(task.classList.contains('done')); // true
</script>

Метод remove() убирает класс, а toggle() добавляет его, если класса нет, и убирает, если есть.

Стили

Отдельное CSS-свойство меняют через style. Названия из нескольких слов пишут без дефиса, в стиле camelCase: font-weight превращается в fontWeight:

<p id="note">Важное сообщение</p>
 
<script>
  const note = document.querySelector('#note');
 
  note.style.color = 'crimson';
  note.style.fontWeight = 'bold';
</script>

Если стилей больше одного-двух, лучше описать их в CSS и переключать класс.

Атрибуты

Стандартные атрибуты тега доступны как свойства объекта. Для любых атрибутов есть методы getAttribute() и setAttribute():

<img id="photo" src="cat.jpg" alt="Кот">
 
<script>
  const photo = document.querySelector('#photo');
 
  photo.setAttribute('alt', 'Рыжий кот');
  console.log(photo.alt); // Рыжий кот
</script>

Свои данные хранят в атрибутах с приставкой data-. Из JavaScript они доступны через dataset: атрибут data-price читается как element.dataset.price.

Скрыть и показать

Свойство hidden прячет элемент со страницы, не удаляя его. Чтобы показать элемент снова, запишите false:

<p id="error">Неверный пароль</p>
 
<script>
  const error = document.querySelector('#error');
 
  error.hidden = true;
  console.log(error.hidden); // true
</script>

Частая ошибка

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

<p id="comment"></p>
 
<script>
  const comment = document.querySelector('#comment');
  const userInput = '<img src="x" onerror="alert(1)">';
 
  comment.textContent = userInput;
</script>