Уроки Javascript #5. Как Работать с DOM в JS? (+ 26 упражнений для полной прокачки).

Мой Telegram: t.me/stackdevru
В этом видео мы выполним 26 задач с DOM (объектная модель документа) элементами. Мы также познакомимся с объектом Document нашего браузера. В практической части видео разберем ключевые методы работы с DOM деревом нашего мини-проекта (смотри ссылку на проект в репозитории).
В этом видео мы будем:
1) Создавать и удалять элементы на нашей странице (изображение, списки, заголовки и др.)
2) Динамически создавать HTML разметку
3) Добавлять классы к элементам
4) Использовать обработчики событий на созданных элементах
и другие......
Репозиторий проекта (структура + упражнения): t.me/stackdevru/6
Как работают обработчики событий: • Уроки Javascript #1. О...
Все про объект Event: • Уроки Javascript #2. О...
Мои Курсы:
Gatsby JS (полный курс): gatsbyjs.ru
React для начинающих: react001.ru
​Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog

[@bezbezov8867]

Шедевр! Можно я у вас дома буду мусор выносить, что бы Вы дальше продолжали?? ))))))))))

[@stackdev]

:) Спасибо. Ванильный JS - обязательно будет. Планирую серию небольших проектов - как раз чтобы руку набить при начале изучения.

[@bezbezov8867]

@@stackdev спасибо ☺️

[@Zibinskiy]

Вообще странно, что ваш канал столь малочислен. Лично мне очень нравится ваш подход к обучению. Спасибо и не останавливайтесь )))

[@stackdev]

Спасибо! Будем работать

[@alexescape7559]

Наберёт своё ещё.

[@catsapp]

Здесь только элита тусуется )

[@GGSoft2009]

Согласень на 100%

[@user-rs2np4dt9j]

Вот это я, понимаю человек заморочился. Объясняет как никто до этого. Спасибо.

[@stackdev]

Спасибо!

[@RinatYouldashbaev]

Дикция и темп речи идеальные. Спасибо.

[@stackdev]

Спасибо!

[@mr.zxzxzxz3816]

отлично 👍👍👍 мне очень понравилось!

[@stackdev]

Спасибо!

[@mr.zxzxzxz3816]

@@stackdev если можно сделайте еще такие упражнения с DOM, спасибо заранее)

[@maks6321]

Самое лучшее наглядное объяснение по работе с DOM, спасибо!)

[@stackdev]

Спасибо!

[@user-jz5yz7ii1p]

Василий, считаю Ваши объяснения и манера подачи материала одними из лучших в инете!!!

[@stackdev]

Оч приятно! Спасибо за поддержку

[@catsapp]

Да очень хорош, один из лучших. Но я еще знаю канал Dev Pandaren -- тоже очень хорошие уроки! И объяснение. И тоже мало просмотров.

[@pupizoid100]

Да здорово. Столько всего было сделано в одном видео Спасибо Вам

[@DerAleksey]

глубоко! сначала не уделял внимания ДОМ элементам, но теперь я точно уверен, что это основы основ. Блин, даже HTML не нужен как таковой в принципе.

[@Voilens]

Я в восторге, спасибо! Новичкам после теории перейти к практике ой как тяжко. Не знаешь что и где и как применять. Ваше видео бесценно!

[@stackdev]

спасибо!

[@muzaffaryunusov7032]

редко благодарю авторов, но за такие примеры (за то, что ты позаморочился) спасибо тебе огномное! пойду переделывать то же самое, но уже самостоятельно

[@stackdev]

Спасибо!

[@Faradenza-sb3mj]

смотрел у других уроки по DOM, было не совсем понятно, у вас более хороший подход, спасибо вам за урок!

[@stackdev]

Спасибо!

[@megachel70]

Спасибо. отличный урок. 🎉

[@user-rx7nw3jo6m]

это ахуенное видео! вот правда! пересмотрел кучу фронтов такого простого и супер понятного никто не делал! респект!

[@stackdev]

Спасибо!

[@FrontNinja]

Я очень редко оставляю комментарии, но тут не смог себя сдержать. Искал информацию по практическому использованию DOM-элементов в js и везде натыкался на сухую теорию, где ничего непонятно. А тут за час буквально разобрался, сразу поэкспериментировал и сразу все начало получаться. Спасибо огромное, мужик, кто бы ты не был.

[@stackdev]

Спасибо вам за поддержку!

[@catsapp]

На самом деле все просто в программировании. Только документацию пишут чудаки

[@gordonfreeman_wf]

Спасибо, Ваш вариант лекции DOM оказался самым классным. Подписался на Ваш канал. Удачи!

[@stackdev]

Спасибо за поддержку!

[@andreykrav3274]

Замечательная подача информации, куча проработанных методов на примерах, очень доходчиво и понятно! Вам огромная благодарность за ваш труд.

[@stackdev]

Спасибо за поддержку!

[@catsapp]

Да да. Классная методология. Именно такие нужны наработки и много. Чтобы все повторялось с небольшими изменениями. Так можно закрепить.

[@maks6321]

Вообще очень нравится такое спокойное и последовательное повествование к тому же и дикция у автора замечательная и сноски с объяснениями все по делу)

[@stackdev]

Спасибо!

[@fkinggaming934]

Прикольный метод упражнений )

[@stackdev]

Спасибо!:)

[@user-dj7im3wh7v]

Спасибо большое, шикарное объяснение и без воды! Только наткнулась на ваш канал, теперь хочу посмотреть все ваши видео

[@stackdev]

Спасибо!

[@Spasenie.]

подтверждаю))

[@petarthecodehunter3333]

Спасибо большое за видео. Понравилось то, что рассмотрели только те аспекты DOM-дерева, которые используются чаще всего, а не стали делать видео на полтора часа, объясняя все фичи - даже те, которые в жизни не пригодятся)

[@stackdev]

Спасибо!

[@aksenovkirill5191]

В третий раз берусь за JS, с версткой все впорядке, никаких глобальных проблем нет - побольше практики, как говорится, но как только сажусь за JS сразу начинается паника, вообще какой-то непроглядный темный лес! Спасибо, ваш подход упрощает мне жизнь, как минимум)

[@catsapp]

Щас как?

[@aksenovkirill5191]

@@catsapp все ок, нативный не вызывает проблем, учу реакт

[@catsapp]

@@aksenovkirill5191 cool

[@user-zx2hn3gf9e]

Василий спасибо большое! ))) В третий раз берусь за JS - с Вами аж полегчало! )))) А то на DOM прямо паника какая-то была... Всё доступно и воспринимается хорошо. Хорошее дело делаете! респект Вам! И удачи!

[@stackdev]

Спасибо!

[@r3dkin]

БОЛЬШОЕ спасибо за этот урок! Следующие жду с нетерпением!

[@stackdev]

Спасибо!

[@slava_tfdf]

Это было доступно понятно и оч круто! Огромное спасибо! иду по следующим видео

[@stackdev]

Спасибо за поддержку!)

[@dinmukhamedamirov2704]

Супер практическая обучалка!!! То что надо! Спасибо огромное! Пожалуйста продолжайте снимать такой контент! Я и мои друзья готовимся к собеседованиям по вашим видео.

[@stackdev]

Спасибо!

[@-growtime-7395]

Спасибо! оригинальный подход и очень удобный для освоения! Мастер!

[@sofiad8849]

Наконец-то я многое поняла, что раньше было для меня сложным

[@elenanaumenko5426]

Спасибо большое за ваш труд. Урок позволил вспомнить то, что было забыто при использовании фреймворков.

[@nikomunikabelen8540]

наконец практика JS!)спасибо. Теории на просторах РФ ютуба много больше чем практики. Спасибо!

[@stackdev]

Спасибо!

[@scvorec77]

Класс все подробно изложили.. ) спасибо огромное.)

[@stackdev]

Спасибо!

[@volodymyrdubinkin4823]

Подробнейшее видео, что мне доводилось смотреть на эту тематику. Все быстро, без лишней воды, без непонятной информации! Спасибо!

[@stackdev]

Спасибо!

[@volodymyrdubinkin4823]

@@stackdev для мало мотивированных людей добавлю - мне 37 лет, 16 из которых работал в сфере торговли и частного бизнеса. Учусь уже 3 месяца полных на front-end. Продвигаюсь тяжело, но прогресс идет. Лично это видео уже пересматриваю четвертый раз. Многое запоминается не сразу, часто вскрывается какая-то информация лишь спустя несколько дней при решении другой задачи. Не унывайте, все кто начал учить и считает что это тяжело - ДА, ЭТО РЕАЛЬНО ТЯЖЕЛО! Но ты либо делаешь что-то, либо ноешь и смотришь на то, как у других получается ))

[@stackdev]

​@@volodymyrdubinkin4823 Еще добавлю. 1) Если бы все было просто, то: - было бы намного больше людей, которые этим занимаются...(соответсвенно зарплаты ниже, конкуренция выше и т д). 2) Повторение - мать учения. Если что-то непонятно сразу - "долбите" и понимание придет!

[@volodymyrdubinkin4823]

@@stackdev ещё хочется добавить, что программисты - это не обособленные, одаренные Господом люди! Это такие же люди как и все остальные, толко приложившие многим больше усилий, что бы выучить и продолжать изучать и далее все это дело. Вопрос времени - сколько вы готовы уделять этому делу своего личного времени, сможет ли вас понять и поддержать семья(если у вас она уже есть), готовы ли вы жертвовать своим свободным временем в угоду учебы, как вы будете мотивироваться, когда руки уже опускаются и хочется послать все к черту и подумать о более простом варианте заработка. Ну и мое личное мнение - это должно нравиться лично вам! Через силу, мне кажется, это работать не будет

[@catsapp]

@@volodymyrdubinkin4823 Как сейчас с обучением? Я постарше

[@nurlansalkinbayev3890]

Здравствуйте. Мне очень понравился Ваш канал и подача материала. Спасибо Вам большое за знания которыми Вы делитесь. Пожалуйста продолжайте выпускать подобные видео по Js.

[@stackdev]

Спасибо!

[@GGSoft2009]

Понравился и еще как. Вы молодец!!!!

[@stackdev]

Спасибо!

[@dmitryshatalov6622]

Очень крутое видео и интересный подход к обучению!!!

[@stackdev]

Спасибо!

[@Spasenie.]

Огромное спасибо за такое обучение, честно скажу, сколько курсов пересмотрел... но вы все объяснили классно, очень быстро запоминается материал, научился новому у вас, спасибо так держать)))

[@stackdev]

Спасибо!

[@user-nb1is5wc4k]

Спасибо, очень полезный урок!

[@stackdev]

Спасибо!

[@varya-draws]

Спасибо, очень классная подача материала, продолжайте и не останавливайтесь. У Вас всё впереди!

[@stackdev]

Спасибо! Такие комментарии очень мотивируют:)

[@user-th7kr8up3h]

Спасибо Вам )))Живите долго и счастливо . Практика супер 👍👨‍💻

[@arhimed6720]

Крутой канал, крутой учитель. Спасибо, я к вам!

[@stackdev]

Спасибо за поддержку!

[@user-ki8ij8xi9c]

Спасибо за отличный урок!👍 Буду смотреть остальные...

[@stackdev]

Спасибо за поддержку!

[@AlexM-uz1hg]

Невероятно крутой урок. Зная основы JS, имея слабенький опыт и некрепкие знания сборки динамических HTML страниц, этот урок прям то, что нужно. Шпаргалка по основам! И всего за каких то 30 минут, бомба ;)

[@stackdev]

Спасибо!

[@user-qe6pv1uk6c]

Огромное спасибо за ваш труд, лайк и подписка)

[@stackdev]

Спасибо!

[@egorros3706]

Отличный канал и отличное объяснение. Спасибо большое. Помогаете учиться.

[@stackdev]

Спасибо!

[@sparta6776]

Спасибо! Без воды и размышлений, коротко - что, зачем и почему. Нравится такой подход, по видео всё было понятно.

[@stackdev]

Спасибо!

[@alo5593]

Просто огромное спасибо!! Вам успехов в продвижении канала!

[@stackdev]

Спасибо за поддержку!

[@user-pl2bb9zu2o]

Спасибо за урок! Пожалуйста продолжайте! у вас очень хорошо получается!

[@stackdev]

Спасибо!

[@alexandregorov3239]

Очень понятно и четко , спасибо вам большое!

[@landlord1047]

как раз начал изучать ДОМ, очень полезное видное, особенно радует,что есть развернутое объяснение *что мы делаем в данный момент*) спасибо)

[@stackdev]

Спасибо!

[@konglomora227]

Эта подача Ваша - просто нечто! Спасибо за такой труд :3

[@stackdev]

Спасибо!

[@Happyendrew]

Очень доходчиво! Благодарю Вас!

[@stackdev]

Спасибо!

[@Dreamer_78]

Желаю вашему каналу процветания и успехов, спасибо огромное за ваши уроки вы Лучший!

[@stackdev]

Спасибо!

[@user-ck5lj9lt7e]

Подписка - однозначно!

[@stackdev]

Спасибо!

[@anton_skch]

Благодарю, очень помогли!

[@antonyeskimo7593]

Спасибо тебе добрый человек

[@hrhrk777]

класс именно такой урок я и искал

[@user-th6wg4ms9o]

Большое спасибо за урок! Вы очень помогли мне.

[@lesson-web]

очень понравился материал

[@user-jm7dy8ks7w]

Спасибо за видео))

[@user-qn3hb4nk6g]

Очень здорово, спсибо!

[@stackdev]

Спасибо!

[@liza_sashina]

Спасибо за видео!

[@awesome5708]

Очень полезное видео

[@stackdev]

Спасибо!

[@alexforos5425]

Замечательное видео! Спасибо за Ваш труд.👍

[@stackdev]

Спасибо за поддержку!

[@Sashad2003]

Спасибо! Очень интересный урок 👍

[@stackdev]

Спасибо!

[@kennymccormick9103]

Большое спасибо!

[@Imthephen]

Очень понятно и круто! Спасибо огромное, прошел дважды для закрепления, второй раз уже сам всё заполнил (хоть и немножко более "грязным" кодом)

[@stackdev]

Спасибо!

[@redhotoak]

Прекрасный урок! Спасибо

[@stackdev]

Спасибо!

[@StorySieva]

Спасибо! Контент шикарный, все понятно

[@stackdev]

Спасибо за коммент!

[@frontend245]

Как же это полезно и интересно! А то уже скучно одни теории слушать.. Лайк и подписка)

[@stackdev]

Спасибо!

[@reverie3746]

Спасибо огромное-преогромное!!!😘

[@stackdev]

Спасибо!

[@Xyjail]

Спасибо))) Очень наглядно)))

[@user-ct3ou5jp8k]

Просто ТОП учитель!

[@user-lm9ee1gn5p]

Огромное спасибо

[@user-od6fb7rl3k]

Спасибо огромное!

[@vladimirpuzey713]

Очень круто! Про adjacent и parentElem дажe не знал. Спасибо за топовый контент 👍

[@stackdev]

Спасибо!

[@romanguryev1307]

Отличный выпуск про DOM-дерево и DOM-элементы и манипуляцию этими элементами посредством JS-методов с практическим применением этих знаний (привет алгоритмам ютуба). Очень крутой формат, лично мне больше всего зашел этот выпуск, теория - это здорово и нужно, но конкретно такой практический разбор основных способов манипулировать элементами мне показался наиболее полезным, надеюсь, будет продолжение такого формата, причем как в ваниле, чтобы знать что происходит под капотом реакта, так и в реакте и его окружении. И заранее спасибо за gatsby, предвкушаю годноту, недавно познакомился с этим фреймворком, без хорошей базы ванильного JS и реакта было тяжело разбираться даже с шаблоном, но с горем пополам удалось осилить, благо на английском было пару неплохих гайдов, а тут первый гайд такого мощного инструмента на русском языке, огромное спасибо.

[@stackdev]

Спасибо за коммент! Это очень мотивирует:)

[@diatm1506]

​@@stackdevа Вы писали парсер html to object js?

[@user-zd2qx3kd1w]

Дякую, було корисно!

[@____Olga__]

Спасибо, Lesson - 🔥

[@stackdev]

Спасибо!:)

[@victortemnov]

Тот момент когда не хочешь чтобы заканчивалось видео)

[@stackdev]

Спасибо!

[@alexsunducov2762]

Спасибо вам Василий. начал изучать js с 0 по вашим видео :) Пока всё понятно.

[@stackdev]

Спасибо за поддержку!

[@sergdonskikh2140]

Спасибо за уроки ! Продолжайте в том же духе ! Надеюсь , найдете время сделать цикл видео по jQuery

[@stackdev]

Спасибо! JQuery давно не трогал:)

[@user-ff3lc1et3u]

Спасибо за супер полезный урок

[@stackdev]

Спасибо за поддержку!

[@user-ff3lc1et3u]

@@stackdev скоро сам буду проходить собес на джуна, и ваши видео очень помогают структурировать информацию

[@stackdev]

@@user-ff3lc1et3u Удачи! В каком городе?

[@user-ff3lc1et3u]

@@stackdev спасибо. Живу в Сочи, а проходить с разными, кто работает удаленно из других городов

[@stackdev]

@@user-ff3lc1et3u Ну круто!

[@thecatwrites9731]

будут еще подобные прокачивающие видео???? если да то очень здорово! очень заходят такие видео и интересно и полезно!

[@stackdev]

Думаю будет

[@lilian_nersis]

Спасибо!!

[@stackdev]

Спасибо за поддержку!

[@XyuTe6eHaBopoTHuK]

спасибо!

[@samueljohnson2812]

Приветствую, отличный урок! Хотел бы спросить, что за плагин вы используете, который позволяет работать emmet внутри обратных кавычек?

[@MrRomanqs]

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

[@theoty-js-react]

Благодарю за прекрасный урок. Василий а подскажите пожалуйста, страница которая сформирована по такому принципу не будет индексироваться поисковиком? ведь html файл у нас практически пустой.

[@drfreedom1824]

Спасибо большое! Вопрос можно ли сделать так: div.insertAdjacentHTML('afterBegin', elemHTML); вместо того чтобы ul помещать в отдельную переменную? Это из пункта "// Поместить этот DIV до элемента " Спасибо

[@Egor_N]

Василий добрый день. Спасибо за урок. Всё очень понятно и доходчиво. Если можно прояснить один момент. Если создаю элемент из кода на прямую let a = document.createElement('div'); то событие эвент на него вешается без проблем. Но если объект создаю по событию другого элемента т.е. через клик creat.onclick = function(){ let d = document.createElement('div'); } то повесить на него событие не получается. В связи с этим у меня вопрос. Я что то делаю не так или это в принципе не возможно? Спасибо.

[@-Vladimir--]

Урок хороший жалко нет стилей для карточек.

[@stackdev]

Можете в качестве д/з добавить!

[@luckytima2315]

Отличный канал ,вот честно ))) Продолжайте ))Только как то слишком,быстро все ,хотелось бы подробней ))

[@stackdev]

Спасибо! здесь хотел в общих чертах пробежаться - подробнее в других видео

[@Poiissonn]

так если непонятен какой-то метод, то нужно просто остановить видео и идти в документацию почитать для чего он

[@stackdev]

@@Poiissonn Все верно - найти на MDN полное описание

[@bezbezov8867]

@@stackdev а почему в описаниях, мне не всё понятно? Можете дать направления над чем работать?

[@stackdev]

@@bezbezov8867 Что конкретно не понятно (пример)?

[@user-ns2tx6oc4q]

👏👏👏

[@stackdev]

Спасибо!

[@nikolaiandrianov1856]

Coooollllll!!!!

[@stackdev]

Спасибо!

[@user-qe6pv1uk6c]

Василий здравствуйте, почему на 48 строке за место того чтобы писать div.querySelector("ul") нельзя написать название переменной а именно elemHTML?

[@therelaxingsound6903]

Спасибо большое! как же все это запомнить где и что применять....🤔🥸🧐

[@stackdev]

Запоминать наверное не нужно.... просто в нужный момент загуглить)

[@therelaxingsound6903]

@@stackdev что гуглить тоже нужно понимать, а для этого четко знать следующий шаг. :)

[@vladislav2023]

Здравствуйте! У меня вопрос как вы разворачиваете html разметку внутри JS файла и после обратных кавычек, в ручную писать html теги муторно и долго, может вы настроили в реакторе или плагины есть? Табятся HTML теги только внутри HTML, заранее спасибо!

[@yuriidest208]

spasibo, like i podpiska s menia

[@stackdev]

Спасибо за поддержку!

[@OlmerMN]

Прикольно, на второй раз повторяю, ибо с тренажерами по DOM совсем туго. Немного не понятно, зачем используются устаревшие элементы вставки.

[@postoronny]

Всё хочу спросить, почему переменные объявляются как const (константа в большинстве языков) ? Спасибо!