Манипулирование DOM или как перестать гадать и начать угадывать
2026-02-26 20:47 Diff
https://ru.hexlet.io/blog/posts/manipulirovanie-dom-ili-kak-perestat-gadat-i-nachat-ugadyvat

Завершил курс «JS: DOM API» https://ru.hexlet.io/courses/js-dom занимательный курс, посвященный манипулированию DOM.

Я уже несколько лет пишу скрипты на JS, но как-то напрямую с DOM не работал, в основном через Jquery. Прошёл этот курс и понял почему, когда я начал изучать JS, ES6 ещё не было, и король был jQuery. Пишешь один код и он работает везде в любом браузере. Обычно код в Chrome, в Firefox работал, особняком стоял IE для которого необходимо было писать свой код отличный от других браузеров. Но года бегут, изменилось чуть более, чем всё, появились новые нативные команды. Что не понравилось, они длиннее по синтаксису и необходимо очень хорошо понимать алгоритмы работы браузера (всплытие, асинхронные события).

Работа с jQuery напоминает кнопочный стиль программирования. Есть кнопка, и на клик этой кнопки вешаем обработчик, который всё делает. Но по факту это путь в никуда, при достаточно большом объёме кода программа превращается в кирпич, и понял что некорректно работает очень и очень трудоёмко.

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

Но своих «приколов» хватает и у DOM, например, команда fetch, при помощи её можно получить json с удаленного сервера, думаете, она сразу возвращает json, нет, она возвращает промис, который возвращает json. Напоминает песню: «Я оглянулся посмотреть, оглянулась ли она, чтобы посмотреть, оглянулся ли я». Поэтому, вместо fetch, эффективней использовать библиотеку axios https://github.com/axios/axios.

Многие решения Кирилла на упражнения меня озадачили, например в упражнении «Обход DOM» было предложено рекурсивное решение с использованием рекурсивной функции reduce, как это всё работает я не понял до сих пор. В упражнении «Пятнашки» я несколько раз переписывал программу, пытался пройти тесты у меня это не получилось. Я решил перестать гадать и захотел начать угадывать, плюнул и посмотрел решение с потерей баллов, тесты оказались заточены под конкретное решение учителя.

А вот урок «Формы» мне понравился, редко где даётся как правильно работать с формой. Итак, курс «JS: DOM API» мне понравился, рекомендую.

Оригинальная публикация.