С jQuery на DOM: перенос небольшого компонента по шагам

16.07.2026 Полезные материалы

Небольшой интерфейс раскрывающейся заметки на экране разработчика

Переход с jQuery лучше начинать с одного самостоятельного компонента. Нужно сохранить поведение, а не механически заменить каждый знак доллара. Разберём кнопку раскрытия заметки: у неё есть состояние, связь с содержимым и стандартная клавиатурная активация.

Нативная версия компонента

index.html

<!doctype html>
<html lang="ru"><meta charset="utf-8"><title>Раскрывающаяся заметка</title>
<button id="toggle" type="button" aria-expanded="false" aria-controls="note">Подробнее</button>
<p id="note" hidden>Участникам нужен собственный инвентарь.</p>
<script>
const button = document.querySelector('#toggle');
const note = document.querySelector('#note');
button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', String(!expanded));
  note.hidden = expanded;
});
</script></html>

Сохраните файл и откройте в браузере. Кнопка показывает абзац и меняет aria-expanded синхронно с видимостью. Повторное нажатие возвращает исходное состояние. Скрипт стоит после разметки, поэтому элементы уже доступны. Если переносите код в отдельный файл, отдельно решите момент запуска через defer или модуль.

Понятия, которые нужно сопоставить
Что сравнить	На что смотреть	Что сделать
Выбор элемента	querySelector возвращает элемент или null	Не обращаться с результатом как с коллекцией
Несколько элементов	querySelectorAll даёт статический NodeList	Не ждать автоматического обновления после вставок
Событие	addEventListener добавляет обработчик	Не регистрировать его повторно при каждом обновлении
Состояние	hidden и aria-expanded согласованы	Не менять только внешний вид

Проверьте, что делала старая библиотека

У цепочек jQuery, делегированных событий, работы с данными и сетевых запросов разные соглашения. Одинаково выглядящие методы не всегда имеют одинаковый результат. MDN отдельно определяет querySelectorAll как статический список: новый элемент после запроса не появится в уже сохранённом NodeList. При миграции это легко пропустить.

Составить сценарии старого компонента до переписывания.
Проверить первое и повторное нажатие.
Пройти Tab и активировать кнопку с клавиатуры.
Проверить отсутствие двойной регистрации старого и нового обработчиков.

Удалять jQuery из всего проекта стоит только после проверки зависимостей. Плагин на другой странице может по-прежнему его использовать. Небольшой компонент можно перевести независимо, а решение об общей библиотеке принять по реальному использованию. Не обещайте ускорение без измерений: удалённая зависимость и скорость пользовательского сценария — связанные, но не тождественные вещи.