Уроки 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
Пікірлер: 278
Шедевр! Можно я у вас дома буду мусор выносить, что бы Вы дальше продолжали?? ))))))))))
@stackdev
3 жыл бұрын
:) Спасибо. Ванильный JS - обязательно будет. Планирую серию небольших проектов - как раз чтобы руку набить при начале изучения.
@bezbezov8867
3 жыл бұрын
@@stackdev спасибо ☺️
глубоко! сначала не уделял внимания ДОМ элементам, но теперь я точно уверен, что это основы основ. Блин, даже HTML не нужен как таковой в принципе.
Дикция и темп речи идеальные. Спасибо.
@stackdev
Жыл бұрын
Спасибо!
Вообще странно, что ваш канал столь малочислен. Лично мне очень нравится ваш подход к обучению. Спасибо и не останавливайтесь )))
@stackdev
3 жыл бұрын
Спасибо! Будем работать
@alexescape7559
2 жыл бұрын
Наберёт своё ещё.
@catsapp
2 жыл бұрын
Здесь только элита тусуется )
@GGSoft2009
Жыл бұрын
Согласень на 100%
смотрел у других уроки по DOM, было не совсем понятно, у вас более хороший подход, спасибо вам за урок!
@stackdev
Жыл бұрын
Спасибо!
Самое лучшее наглядное объяснение по работе с DOM, спасибо!)
@stackdev
2 жыл бұрын
Спасибо!
Вот это я, понимаю человек заморочился. Объясняет как никто до этого. Спасибо.
@stackdev
3 жыл бұрын
Спасибо!
Василий, считаю Ваши объяснения и манера подачи материала одними из лучших в инете!!!
@stackdev
2 жыл бұрын
Оч приятно! Спасибо за поддержку
@catsapp
2 жыл бұрын
Да очень хорош, один из лучших. Но я еще знаю канал Dev Pandaren -- тоже очень хорошие уроки! И объяснение. И тоже мало просмотров.
Замечательная подача информации, куча проработанных методов на примерах, очень доходчиво и понятно! Вам огромная благодарность за ваш труд.
@stackdev
2 жыл бұрын
Спасибо за поддержку!
@catsapp
2 жыл бұрын
Да да. Классная методология. Именно такие нужны наработки и много. Чтобы все повторялось с небольшими изменениями. Так можно закрепить.
Я в восторге, спасибо! Новичкам после теории перейти к практике ой как тяжко. Не знаешь что и где и как применять. Ваше видео бесценно!
@stackdev
Жыл бұрын
спасибо!
редко благодарю авторов, но за такие примеры (за то, что ты позаморочился) спасибо тебе огномное! пойду переделывать то же самое, но уже самостоятельно
@stackdev
3 жыл бұрын
Спасибо!
это ахуенное видео! вот правда! пересмотрел кучу фронтов такого простого и супер понятного никто не делал! респект!
@stackdev
2 жыл бұрын
Спасибо!
отлично 👍👍👍 мне очень понравилось!
@stackdev
2 жыл бұрын
Спасибо!
@mr.zxzxzxz3816
2 жыл бұрын
@@stackdev если можно сделайте еще такие упражнения с DOM, спасибо заранее)
Я очень редко оставляю комментарии, но тут не смог себя сдержать. Искал информацию по практическому использованию DOM-элементов в js и везде натыкался на сухую теорию, где ничего непонятно. А тут за час буквально разобрался, сразу поэкспериментировал и сразу все начало получаться. Спасибо огромное, мужик, кто бы ты не был.
@stackdev
2 жыл бұрын
Спасибо вам за поддержку!
@catsapp
2 жыл бұрын
На самом деле все просто в программировании. Только документацию пишут чудаки
Спасибо большое за видео. Понравилось то, что рассмотрели только те аспекты DOM-дерева, которые используются чаще всего, а не стали делать видео на полтора часа, объясняя все фичи - даже те, которые в жизни не пригодятся)
@stackdev
2 жыл бұрын
Спасибо!
Спасибо, Ваш вариант лекции DOM оказался самым классным. Подписался на Ваш канал. Удачи!
@stackdev
3 жыл бұрын
Спасибо за поддержку!
наконец практика JS!)спасибо. Теории на просторах РФ ютуба много больше чем практики. Спасибо!
@stackdev
2 жыл бұрын
Спасибо!
Спасибо за видео!
Да здорово. Столько всего было сделано в одном видео Спасибо Вам
Спасибо Вам )))Живите долго и счастливо . Практика супер 👍👨💻
Очень понятно и четко , спасибо вам большое!
Спасибо за видео))
Подробнейшее видео, что мне доводилось смотреть на эту тематику. Все быстро, без лишней воды, без непонятной информации! Спасибо!
@stackdev
3 жыл бұрын
Спасибо!
@volodymyrdubinkin4823
3 жыл бұрын
@@stackdev для мало мотивированных людей добавлю - мне 37 лет, 16 из которых работал в сфере торговли и частного бизнеса. Учусь уже 3 месяца полных на front-end. Продвигаюсь тяжело, но прогресс идет. Лично это видео уже пересматриваю четвертый раз. Многое запоминается не сразу, часто вскрывается какая-то информация лишь спустя несколько дней при решении другой задачи. Не унывайте, все кто начал учить и считает что это тяжело - ДА, ЭТО РЕАЛЬНО ТЯЖЕЛО! Но ты либо делаешь что-то, либо ноешь и смотришь на то, как у других получается ))
@stackdev
3 жыл бұрын
@@volodymyrdubinkin4823 Еще добавлю. 1) Если бы все было просто, то: - было бы намного больше людей, которые этим занимаются...(соответсвенно зарплаты ниже, конкуренция выше и т д). 2) Повторение - мать учения. Если что-то непонятно сразу - "долбите" и понимание придет!
@volodymyrdubinkin4823
3 жыл бұрын
@@stackdev ещё хочется добавить, что программисты - это не обособленные, одаренные Господом люди! Это такие же люди как и все остальные, толко приложившие многим больше усилий, что бы выучить и продолжать изучать и далее все это дело. Вопрос времени - сколько вы готовы уделять этому делу своего личного времени, сможет ли вас понять и поддержать семья(если у вас она уже есть), готовы ли вы жертвовать своим свободным временем в угоду учебы, как вы будете мотивироваться, когда руки уже опускаются и хочется послать все к черту и подумать о более простом варианте заработка. Ну и мое личное мнение - это должно нравиться лично вам! Через силу, мне кажется, это работать не будет
@catsapp
2 жыл бұрын
@@volodymyrdubinkin4823 Как сейчас с обучением? Я постарше
Спасибо. отличный урок. 🎉
Благодарю, очень помогли!
Спасибо, очень классная подача материала, продолжайте и не останавливайтесь. У Вас всё впереди!
@stackdev
3 жыл бұрын
Спасибо! Такие комментарии очень мотивируют:)
Большое спасибо!
Спасибо огромное!
Спасибо большое, шикарное объяснение и без воды! Только наткнулась на ваш канал, теперь хочу посмотреть все ваши видео
@stackdev
2 жыл бұрын
Спасибо!
@Spasenie.
2 жыл бұрын
подтверждаю))
Большое спасибо за урок! Вы очень помогли мне.
Огромное спасибо
Спасибо! оригинальный подход и очень удобный для освоения! Мастер!
Спасибо тебе добрый человек
Просто огромное спасибо!! Вам успехов в продвижении канала!
@stackdev
Жыл бұрын
Спасибо за поддержку!
Спасибо))) Очень наглядно)))
Вообще очень нравится такое спокойное и последовательное повествование к тому же и дикция у автора замечательная и сноски с объяснениями все по делу)
@stackdev
2 жыл бұрын
Спасибо!
Наконец-то я многое поняла, что раньше было для меня сложным
БОЛЬШОЕ спасибо за этот урок! Следующие жду с нетерпением!
@stackdev
2 жыл бұрын
Спасибо!
Замечательное видео! Спасибо за Ваш труд.👍
@stackdev
Жыл бұрын
Спасибо за поддержку!
Прикольный метод упражнений )
@stackdev
2 жыл бұрын
Спасибо!:)
Очень доходчиво! Благодарю Вас!
@stackdev
Жыл бұрын
Спасибо!
Эта подача Ваша - просто нечто! Спасибо за такой труд :3
@stackdev
3 жыл бұрын
Спасибо!
Спасибо! Отличное видео
@stackdev
Жыл бұрын
Спасибо!
Спасибо большое за ваш труд. Урок позволил вспомнить то, что было забыто при использовании фреймворков.
Спасибо! Очень интересный урок 👍
@stackdev
Жыл бұрын
Спасибо!
Спасибо за урок! Пожалуйста продолжайте! у вас очень хорошо получается!
@stackdev
3 жыл бұрын
Спасибо!
Прекрасный урок! Спасибо
@stackdev
2 жыл бұрын
Спасибо!
очень понравился материал
Спасибо за отличный урок!👍 Буду смотреть остальные...
@stackdev
2 жыл бұрын
Спасибо за поддержку!
Спасибо огромное-преогромное!!!😘
@stackdev
Жыл бұрын
Спасибо!
Спасибо! Без воды и размышлений, коротко - что, зачем и почему. Нравится такой подход, по видео всё было понятно.
@stackdev
3 жыл бұрын
Спасибо!
Очень здорово, спсибо!
@stackdev
2 жыл бұрын
Спасибо!
Класс все подробно изложили.. ) спасибо огромное.)
@stackdev
Жыл бұрын
Спасибо!
В третий раз берусь за JS, с версткой все впорядке, никаких глобальных проблем нет - побольше практики, как говорится, но как только сажусь за JS сразу начинается паника, вообще какой-то непроглядный темный лес! Спасибо, ваш подход упрощает мне жизнь, как минимум)
@catsapp
2 жыл бұрын
Щас как?
@aksenovkirill5191
2 жыл бұрын
@@catsapp все ок, нативный не вызывает проблем, учу реакт
@catsapp
2 жыл бұрын
@@aksenovkirill5191 cool
Василий спасибо большое! ))) В третий раз берусь за JS - с Вами аж полегчало! )))) А то на DOM прямо паника какая-то была... Всё доступно и воспринимается хорошо. Хорошее дело делаете! респект Вам! И удачи!
@stackdev
Жыл бұрын
Спасибо!
Спасибо, Lesson - 🔥
@stackdev
3 жыл бұрын
Спасибо!:)
Огромное спасибо за ваш труд, лайк и подписка)
@stackdev
Жыл бұрын
Спасибо!
Отличный канал и отличное объяснение. Спасибо большое. Помогаете учиться.
@stackdev
Жыл бұрын
Спасибо!
Очень крутое видео и интересный подход к обучению!!!
@stackdev
3 жыл бұрын
Спасибо!
класс именно такой урок я и искал
Супер практическая обучалка!!! То что надо! Спасибо огромное! Пожалуйста продолжайте снимать такой контент! Я и мои друзья готовимся к собеседованиям по вашим видео.
@stackdev
Жыл бұрын
Спасибо!
Это было доступно понятно и оч круто! Огромное спасибо! иду по следующим видео
@stackdev
Жыл бұрын
Спасибо за поддержку!)
Здравствуйте. Мне очень понравился Ваш канал и подача материала. Спасибо Вам большое за знания которыми Вы делитесь. Пожалуйста продолжайте выпускать подобные видео по Js.
@stackdev
2 жыл бұрын
Спасибо!
Понравился и еще как. Вы молодец!!!!
@stackdev
Жыл бұрын
Спасибо!
Спасибо, очень полезный урок!
@stackdev
Жыл бұрын
Спасибо!
Очень понятно и круто! Спасибо огромное, прошел дважды для закрепления, второй раз уже сам всё заполнил (хоть и немножко более "грязным" кодом)
@stackdev
3 жыл бұрын
Спасибо!
Огромное спасибо за такое обучение, честно скажу, сколько курсов пересмотрел... но вы все объяснили классно, очень быстро запоминается материал, научился новому у вас, спасибо так держать)))
@stackdev
2 жыл бұрын
Спасибо!
Просто ТОП учитель!
Желаю вашему каналу процветания и успехов, спасибо огромное за ваши уроки вы Лучший!
@stackdev
Жыл бұрын
Спасибо!
Подписка - однозначно!
@stackdev
2 жыл бұрын
Спасибо!
Крутой канал, крутой учитель. Спасибо, я к вам!
@stackdev
2 жыл бұрын
Спасибо за поддержку!
Дякую, було корисно!
Спасибо!!
@stackdev
2 жыл бұрын
Спасибо за поддержку!
как раз начал изучать ДОМ, очень полезное видное, особенно радует,что есть развернутое объяснение *что мы делаем в данный момент*) спасибо)
@stackdev
3 жыл бұрын
Спасибо!
спасибо!
Очень полезное видео
@stackdev
2 жыл бұрын
Спасибо!
Очень круто! Про adjacent и parentElem дажe не знал. Спасибо за топовый контент 👍
@stackdev
2 жыл бұрын
Спасибо!
Как же это полезно и интересно! А то уже скучно одни теории слушать.. Лайк и подписка)
@stackdev
2 жыл бұрын
Спасибо!
Спасибо за уроки ! Продолжайте в том же духе ! Надеюсь , найдете время сделать цикл видео по jQuery
@stackdev
3 жыл бұрын
Спасибо! JQuery давно не трогал:)
Невероятно крутой урок. Зная основы JS, имея слабенький опыт и некрепкие знания сборки динамических HTML страниц, этот урок прям то, что нужно. Шпаргалка по основам! И всего за каких то 30 минут, бомба ;)
@stackdev
2 жыл бұрын
Спасибо!
Спасибо вам Василий. начал изучать js с 0 по вашим видео :) Пока всё понятно.
@stackdev
2 жыл бұрын
Спасибо за поддержку!
Тот момент когда не хочешь чтобы заканчивалось видео)
@stackdev
3 жыл бұрын
Спасибо!
Отличный выпуск про DOM-дерево и DOM-элементы и манипуляцию этими элементами посредством JS-методов с практическим применением этих знаний (привет алгоритмам ютуба). Очень крутой формат, лично мне больше всего зашел этот выпуск, теория - это здорово и нужно, но конкретно такой практический разбор основных способов манипулировать элементами мне показался наиболее полезным, надеюсь, будет продолжение такого формата, причем как в ваниле, чтобы знать что происходит под капотом реакта, так и в реакте и его окружении. И заранее спасибо за gatsby, предвкушаю годноту, недавно познакомился с этим фреймворком, без хорошей базы ванильного JS и реакта было тяжело разбираться даже с шаблоном, но с горем пополам удалось осилить, благо на английском было пару неплохих гайдов, а тут первый гайд такого мощного инструмента на русском языке, огромное спасибо.
@stackdev
3 жыл бұрын
Спасибо за коммент! Это очень мотивирует:)
@diatm1506
8 ай бұрын
@@stackdevа Вы писали парсер html to object js?
будут еще подобные прокачивающие видео???? если да то очень здорово! очень заходят такие видео и интересно и полезно!
@stackdev
2 жыл бұрын
Думаю будет
Coooollllll!!!!
@stackdev
Жыл бұрын
Спасибо!
Спасибо за супер полезный урок
@stackdev
2 жыл бұрын
Спасибо за поддержку!
@user-ff3lc1et3u
2 жыл бұрын
@@stackdev скоро сам буду проходить собес на джуна, и ваши видео очень помогают структурировать информацию
@stackdev
2 жыл бұрын
@@user-ff3lc1et3u Удачи! В каком городе?
@user-ff3lc1et3u
2 жыл бұрын
@@stackdev спасибо. Живу в Сочи, а проходить с разными, кто работает удаленно из других городов
@stackdev
2 жыл бұрын
@@user-ff3lc1et3u Ну круто!
Приветствую, отличный урок! Хотел бы спросить, что за плагин вы используете, который позволяет работать emmet внутри обратных кавычек?
👏👏👏
@stackdev
3 жыл бұрын
Спасибо!
Благодарю за прекрасный урок. Василий а подскажите пожалуйста, страница которая сформирована по такому принципу не будет индексироваться поисковиком? ведь html файл у нас практически пустой.
Контент супер! По качеству на уровне зарубежных курсов, а местами и лучше, в той же подаче. Совсем новичкам тяжеловато может быть будет, но для тех, кто в общем знаком с представленным материалом, для закрепления и практики - идеально. Делал наперед и сверялся с Вашим решением, позвольте вставить свои 5 копеек, исключительно из добрых(дискуссионных?) побуждений, не критикуя: 1) *carsList.map((car) => generateAutoCard(car.brand, car.color, car.year))* - без return и фигурных скобок лаконичнее/нагляднее, мне кажется (возможно, Вы где-то уже обговаривали моменты, когда так можно делать, тогда пардон) 2) Раз в последнем задании Вы так замечательно и скрупулезно объяснили, почему стоило использовать closest, но можно было и parentElement, думаю, стоит где-то в дальнейшем упомянуть и про event delegation, - как обойтись лишь одним обработчиком событий в таких случаях: *carsDiv.addEventListener("click", function (e) {* *if (e.target.classList.contains("btn")) e.target.closest(".autoCard").remove();* *})*
@stackdev
3 жыл бұрын
Спасибо за коммент. Все правильно - именно поэтому всегда нужен code review:) Одна голова хорошо - а 2 лучше.
spasibo, like i podpiska s menia
@stackdev
3 жыл бұрын
Спасибо за поддержку!
Спасибо большое! как же все это запомнить где и что применять....🤔🥸🧐
@stackdev
Жыл бұрын
Запоминать наверное не нужно.... просто в нужный момент загуглить)
@therelaxingsound6903
Жыл бұрын
@@stackdev что гуглить тоже нужно понимать, а для этого четко знать следующий шаг. :)
подписался
Урок хороший жалко нет стилей для карточек.
@stackdev
2 жыл бұрын
Можете в качестве д/з добавить!
Спасибо большое! Вопрос можно ли сделать так: div.insertAdjacentHTML('afterBegin', elemHTML); вместо того чтобы ul помещать в отдельную переменную? Это из пункта "// Поместить этот DIV до элемента " Спасибо
Отличный канал ,вот честно ))) Продолжайте ))Только как то слишком,быстро все ,хотелось бы подробней ))
@stackdev
3 жыл бұрын
Спасибо! здесь хотел в общих чертах пробежаться - подробнее в других видео
@Poiissonn
3 жыл бұрын
так если непонятен какой-то метод, то нужно просто остановить видео и идти в документацию почитать для чего он
@stackdev
3 жыл бұрын
@@Poiissonn Все верно - найти на MDN полное описание
@bezbezov8867
3 жыл бұрын
@@stackdev а почему в описаниях, мне не всё понятно? Можете дать направления над чем работать?
@stackdev
3 жыл бұрын
@@bezbezov8867 Что конкретно не понятно (пример)?
Возможно ошибаюсь ноооо DOM -document obj model, возможно специальная оговорочка))) для роста комментов
@stackdev
Жыл бұрын
Вы все правильно говорите - я оговорился)
не люблю комментировать. но тут не удержался. я нулевой. много читал тесты прошел. а понял все только после вашего видео. что это, зачем это, как думать тут. спасибо огромное.
Василий, подскажите, есть принципиальное отличие между textContent и innerText?. Обучающий контент у Вас, конечно, на высоте. И подход очень хороший.
@theoty-js-react
2 жыл бұрын
innerText вставляет ЭЛЕМЕНТ ВНУТРИ нашего блока а textContent вставляет текст для таких элементов как H1
@Code.bless_you
2 жыл бұрын
@@theoty-js-react большое Вам спасибо!
Василий добрый день. Спасибо за урок. Всё очень понятно и доходчиво. Если можно прояснить один момент. Если создаю элемент из кода на прямую let a = document.createElement('div'); то событие эвент на него вешается без проблем. Но если объект создаю по событию другого элемента т.е. через клик creat.onclick = function(){ let d = document.createElement('div'); } то повесить на него событие не получается. В связи с этим у меня вопрос. Я что то делаю не так или это в принципе не возможно? Спасибо.