Несмотря на то, что я только начал свой путь программирования, я уже вижу, насколько мощными являются имеющиеся в нашем распоряжении инструменты для создания веб-страниц. И нет ничего более мощного, чем манипулирование DOM.
В начале этого пути написание HTML было чем-то, чем я никогда раньше не занимался. Так что, хотя я только начинаю с этого, я смог понять истинную важность HTML в обеспечении основы и структуры веб-страницы. И хотя необработанный HTML сам по себе мощен, страница, созданная только с помощью HTML, будет иметь гораздо более ограниченную функциональность, чем страница, созданная с использованием вспомогательного языка кодирования, такого как JavaScript, для расширения возможностей взаимодействия с ним. Сила, которая предоставляется нам, заключается в использовании манипуляций с DOM.
DOM — это, по сути, то, что находится между необработанным HTML и CSS веб-страницы и то, что отображается в браузере. Это окончательное представление, которое предоставляется пользователю. Он не манипулирует и не изменяет базовый HTML-код напрямую, но может расширять его и переписывать те его части, которые отображаются пользователю. Таким образом, возможность манипулировать тем, что видит конечный пользователь, когда он перемещается по странице и выполняет различные действия, необходима для создания динамичных, многофункциональных веб-приложений и веб-сайтов.
Использование JavaScript в манипулировании DOM позволяет нам добавлять слушателей на страницу, которые могут реагировать на взаимодействие и ввод данных пользователем. И используя эти прослушиватели, мы можем запускать события. Например, когда нажимается элемент кнопки, вы можете заставить JS сообщить DOM, что в определенном контейнере div он должен удалить текущий тег h1, который там находится, и вместо этого загрузить новый тег h1, тег p, тег ul, и еще один тег p. И вы можете указать ему заполнить эти теги содержимым, которое затем будет отображаться там, где ранее был этот один тег h1. И вы можете сделать все это в ответ на одно нажатие кнопки. Этот пример лишь поверхностно показывает, что манипулирование DOM может позволить нам как программистам и разработчикам.
Я могу поделиться еще немного практическим опытом, который у меня был с манипулированием DOM. В настоящее время я участвую в учебном курсе по программированию Flatiron School, и в качестве нашего первого проекта нам нужно было создать веб-страницу, которая использовала общедоступный API (для извлечения информации из базы данных) и содержала элементы взаимодействия. Мой партнер по проекту создал приложение Pokedex, которое извлекает информацию об исходном 151 покемоне и создает список всех этих покемонов. Затем мы сделали так, что при нажатии на контейнер с покемоном область страницы отображала более подробную информацию о выбранном покемоне. Используя JavaScript, мы также смогли динамически стилизовать элементы на странице по мере их загрузки в зависимости от типа покемонов, которыми они были. Например, на изображении ниже вы можете видеть, что «карточки», содержащие покемонов в нижней части страницы, окрашены в зависимости от основного типа этого покемона. Итак, Бульбазавр, Ивизавр и Венузавр все зеленые, Сквиртл — синий, Чармандер — красный, Пикачу — желтый и т. д.
Мы также смогли динамически изменить фон для отображения покемонов в верхней левой части страницы, который также был установлен на основе основного типа отображаемого покемона. Итак, если бы я выбрал Пикачу, это выглядело бы так:
Это лишь небольшой пример того, как использование языков программирования, таких как JavaScript, может дать нам огромный контроль над DOM. Используя их вместе, мы можем написать замечательные, интерактивные, многофункциональные веб-страницы и приложения. И хотя до сих пор я проводил мало времени, взаимодействуя с DOM, невероятно интересно видеть, сколько еще я могу сделать, манипулируя DOM, чтобы иметь возможность создавать действительно замечательные приложения.
