Уроки Javascript #5. Как Работать с DOM в JS? (+ 26 упражнений для полной прокачки).
ฝัง
- เผยแพร่เมื่อ 13 ก.ย. 2024
- Мой 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
![Уроки Javascript #6. Объекты и массивы. Как правильно копировать? [7 примеров]](http://i.ytimg.com/vi/82yxd9xbyAQ/mqdefault.jpg)
![Уроки Javascript #6. Объекты и массивы. Как правильно копировать? [7 примеров]](/img/tr.png)
Дикция и темп речи идеальные. Спасибо.
Спасибо!
Шедевр! Можно я у вас дома буду мусор выносить, что бы Вы дальше продолжали?? ))))))))))
:) Спасибо. Ванильный JS - обязательно будет. Планирую серию небольших проектов - как раз чтобы руку набить при начале изучения.
@@stackdev спасибо ☺️
Самое лучшее наглядное объяснение по работе с DOM, спасибо!)
Спасибо!
смотрел у других уроки по DOM, было не совсем понятно, у вас более хороший подход, спасибо вам за урок!
Спасибо!
отлично 👍👍👍 мне очень понравилось!
Спасибо!
@@stackdev если можно сделайте еще такие упражнения с DOM, спасибо заранее)
Вообще странно, что ваш канал столь малочислен. Лично мне очень нравится ваш подход к обучению. Спасибо и не останавливайтесь )))
Спасибо! Будем работать
Наберёт своё ещё.
Согласень на 100%
Вот это я, понимаю человек заморочился. Объясняет как никто до этого. Спасибо.
Спасибо!
Василий, считаю Ваши объяснения и манера подачи материала одними из лучших в инете!!!
Оч приятно! Спасибо за поддержку
глубоко! сначала не уделял внимания ДОМ элементам, но теперь я точно уверен, что это основы основ.
Блин, даже HTML не нужен как таковой в принципе.
Подробнейшее видео, что мне доводилось смотреть на эту тематику. Все быстро, без лишней воды, без непонятной информации! Спасибо!
Спасибо!
@@stackdev для мало мотивированных людей добавлю - мне 37 лет, 16 из которых работал в сфере торговли и частного бизнеса. Учусь уже 3 месяца полных на front-end. Продвигаюсь тяжело, но прогресс идет. Лично это видео уже пересматриваю четвертый раз. Многое запоминается не сразу, часто вскрывается какая-то информация лишь спустя несколько дней при решении другой задачи. Не унывайте, все кто начал учить и считает что это тяжело - ДА, ЭТО РЕАЛЬНО ТЯЖЕЛО! Но ты либо делаешь что-то, либо ноешь и смотришь на то, как у других получается ))
@@volodymyrdubinkin4823 Еще добавлю.
1) Если бы все было просто, то:
- было бы намного больше людей, которые этим занимаются...(соответсвенно зарплаты ниже, конкуренция выше и т д).
2) Повторение - мать учения. Если что-то непонятно сразу - "долбите" и понимание придет!
@@stackdev ещё хочется добавить, что программисты - это не обособленные, одаренные Господом люди! Это такие же люди как и все остальные, толко приложившие многим больше усилий, что бы выучить и продолжать изучать и далее все это дело. Вопрос времени - сколько вы готовы уделять этому делу своего личного времени, сможет ли вас понять и поддержать семья(если у вас она уже есть), готовы ли вы жертвовать своим свободным временем в угоду учебы, как вы будете мотивироваться, когда руки уже опускаются и хочется послать все к черту и подумать о более простом варианте заработка. Ну и мое личное мнение - это должно нравиться лично вам! Через силу, мне кажется, это работать не будет
@catsapp animation Обучение продолжаю, не бросаю, хотя и трудно.
Я очень редко оставляю комментарии, но тут не смог себя сдержать. Искал информацию по практическому использованию DOM-элементов в js и везде натыкался на сухую теорию, где ничего непонятно. А тут за час буквально разобрался, сразу поэкспериментировал и сразу все начало получаться. Спасибо огромное, мужик, кто бы ты не был.
Спасибо вам за поддержку!
Замечательная подача информации,
куча проработанных методов на примерах,
очень доходчиво и понятно!
Вам огромная благодарность за ваш труд.
Спасибо за поддержку!
Спасибо! Без воды и размышлений, коротко - что, зачем и почему. Нравится такой подход, по видео всё было понятно.
Спасибо!
В третий раз берусь за JS, с версткой все впорядке, никаких глобальных проблем нет - побольше практики, как говорится, но как только сажусь за JS сразу начинается паника, вообще какой-то непроглядный темный лес! Спасибо, ваш подход упрощает мне жизнь, как минимум)
@catsapp animation все ок, нативный не вызывает проблем, учу реакт
Чувак, никогда не думал, что буду это учить, но ты попал в самую суть: мне нужен JS для Интернета вещей)
Спасибо, Ваш вариант лекции DOM оказался самым классным. Подписался на Ваш канал. Удачи!
Спасибо за поддержку!
Я в восторге, спасибо! Новичкам после теории перейти к практике ой как тяжко. Не знаешь что и где и как применять. Ваше видео бесценно!
спасибо!
это ахуенное видео! вот правда! пересмотрел кучу фронтов такого простого и супер понятного никто не делал! респект!
Спасибо!
редко благодарю авторов, но за такие примеры (за то, что ты позаморочился) спасибо тебе огномное!
пойду переделывать то же самое, но уже самостоятельно
Спасибо!
наконец практика JS!)спасибо. Теории на просторах РФ ютуба много больше чем практики. Спасибо!
Спасибо!
Спасибо большое за видео. Понравилось то, что рассмотрели только те аспекты DOM-дерева, которые используются чаще всего, а не стали делать видео на полтора часа, объясняя все фичи - даже те, которые в жизни не пригодятся)
Спасибо!
Прикольный метод упражнений )
Спасибо!:)
Понравился и еще как. Вы молодец!!!!
Спасибо!
Да здорово. Столько всего было сделано в одном видео Спасибо Вам
Спасибо большое, шикарное объяснение и без воды! Только наткнулась на ваш канал, теперь хочу посмотреть все ваши видео
Спасибо!
подтверждаю))
Вообще очень нравится такое спокойное и последовательное повествование к тому же и дикция у автора замечательная и сноски с объяснениями все по делу)
Спасибо!
Класс все подробно изложили.. ) спасибо огромное.)
Спасибо!
Наконец-то я многое поняла, что раньше было для меня сложным
БОЛЬШОЕ спасибо за этот урок! Следующие жду с нетерпением!
Спасибо!
Спасибо. отличный урок. 🎉
Спасибо за супер полезный урок
Спасибо за поддержку!
@@stackdev скоро сам буду проходить собес на джуна, и ваши видео очень помогают структурировать информацию
@@user-ff3lc1et3u Удачи! В каком городе?
@@stackdev спасибо. Живу в Сочи, а проходить с разными, кто работает удаленно из других городов
@@user-ff3lc1et3u Ну круто!
Спасибо тебе добрый человек
Супер практическая обучалка!!! То что надо! Спасибо огромное! Пожалуйста продолжайте снимать такой контент! Я и мои друзья готовимся к собеседованиям по вашим видео.
Спасибо!
Это было доступно понятно и оч круто! Огромное спасибо! иду по следующим видео
Спасибо за поддержку!)
Крутой канал, крутой учитель. Спасибо, я к вам!
Спасибо за поддержку!
Василий спасибо большое! ))) В третий раз берусь за JS - с Вами аж полегчало! )))) А то на DOM прямо паника какая-то была... Всё доступно и воспринимается хорошо. Хорошее дело делаете! респект Вам! И удачи!
Спасибо!
Очень крутое видео и интересный подход к обучению!!!
Спасибо!
класс
именно такой урок я и искал
Спасибо, очень полезный урок!
Спасибо!
Спасибо за видео))
Здравствуйте. Мне очень понравился Ваш канал и подача материала. Спасибо Вам большое за знания которыми Вы делитесь. Пожалуйста продолжайте выпускать подобные видео по Js.
Спасибо!
Очень полезное видео
Спасибо!
Подписка - однозначно!
Спасибо!
Невероятно крутой урок.
Зная основы JS, имея слабенький опыт и некрепкие знания сборки динамических HTML страниц, этот урок прям то, что нужно. Шпаргалка по основам! И всего за каких то 30 минут, бомба ;)
Спасибо!
Огромное спасибо за такое обучение, честно скажу, сколько курсов пересмотрел... но вы все объяснили классно, очень быстро запоминается материал, научился новому у вас, спасибо так держать)))
Спасибо!
Огромное спасибо за ваш труд, лайк и подписка)
Спасибо!
Благодарю, очень помогли!
Большое спасибо!
Спасибо, очень классная подача материала, продолжайте и не останавливайтесь. У Вас всё впереди!
Спасибо! Такие комментарии очень мотивируют:)
Отличный канал и отличное объяснение. Спасибо большое. Помогаете учиться.
Спасибо!
Спасибо! оригинальный подход и очень удобный для освоения! Мастер!
очень понравился материал
Желаю вашему каналу процветания и успехов, спасибо огромное за ваши уроки вы Лучший!
Спасибо!
Спасибо большое за ваш труд. Урок позволил вспомнить то, что было забыто при использовании фреймворков.
Очень здорово, спсибо!
Спасибо!
Просто ТОП учитель!
Спасибо за отличный урок!👍 Буду смотреть остальные...
Спасибо за поддержку!
Очень доходчиво! Благодарю Вас!
Спасибо!
Отличный выпуск про DOM-дерево и DOM-элементы и манипуляцию этими элементами посредством JS-методов с практическим применением этих знаний (привет алгоритмам ютуба). Очень крутой формат, лично мне больше всего зашел этот выпуск, теория - это здорово и нужно, но конкретно такой практический разбор основных способов манипулировать элементами мне показался наиболее полезным, надеюсь, будет продолжение такого формата, причем как в ваниле, чтобы знать что происходит под капотом реакта, так и в реакте и его окружении. И заранее спасибо за gatsby, предвкушаю годноту, недавно познакомился с этим фреймворком, без хорошей базы ванильного JS и реакта было тяжело разбираться даже с шаблоном, но с горем пополам удалось осилить, благо на английском было пару неплохих гайдов, а тут первый гайд такого мощного инструмента на русском языке, огромное спасибо.
Спасибо за коммент! Это очень мотивирует:)
@@stackdevа Вы писали парсер html to object js?
Как же это полезно и интересно! А то уже скучно одни теории слушать.. Лайк и подписка)
Спасибо!
как раз начал изучать ДОМ, очень полезное видное, особенно радует,что есть развернутое объяснение *что мы делаем в данный момент*) спасибо)
Спасибо!
Спасибо огромное-преогромное!!!😘
Спасибо!
Спасибо Вам )))Живите долго и счастливо . Практика супер 👍👨💻
Очень понятно и четко , спасибо вам большое!
Огромное спасибо
Просто огромное спасибо!! Вам успехов в продвижении канала!
Спасибо за поддержку!
Эта подача Ваша - просто нечто! Спасибо за такой труд :3
Спасибо!
круто, спасибо!
Спасибо за урок! Пожалуйста продолжайте! у вас очень хорошо получается!
Спасибо!
Спасибо!🎉🎉🎉🎉
Спасибо! Контент шикарный, все понятно
Спасибо за коммент!
Спасибо! Очень интересный урок 👍
Спасибо!
Тот момент когда не хочешь чтобы заканчивалось видео)
Спасибо!
Большое спасибо за урок! Вы очень помогли мне.
Спасибо вам Василий. начал изучать js с 0 по вашим видео :) Пока всё понятно.
Спасибо за поддержку!
Очень круто! Про adjacent и parentElem дажe не знал. Спасибо за топовый контент 👍
Спасибо!
Прекрасный урок! Спасибо
Спасибо!
Спасибо)))
Очень наглядно)))
Замечательное видео! Спасибо за Ваш труд.👍
Спасибо за поддержку!
Спасибо за видео!
Спасибо!!
Спасибо за поддержку!
Спасибо, Lesson - 🔥
Спасибо!:)
Очень понятно и круто! Спасибо огромное, прошел дважды для закрепления, второй раз уже сам всё заполнил (хоть и немножко более "грязным" кодом)
Спасибо!
Дякую, було корисно!
Отличный канал ,вот честно ))) Продолжайте ))Только как то слишком,быстро все ,хотелось бы подробней ))
Спасибо! здесь хотел в общих чертах пробежаться - подробнее в других видео
так если непонятен какой-то метод, то нужно просто остановить видео и идти в документацию почитать для чего он
@@Poiissonn Все верно - найти на MDN полное описание
@@stackdev а почему в описаниях, мне не всё понятно? Можете дать направления над чем работать?
@@bezbezov8867 Что конкретно не понятно (пример)?
Спасибо за уроки ! Продолжайте в том же духе ! Надеюсь , найдете время сделать цикл видео по jQuery
Спасибо! JQuery давно не трогал:)
будут еще подобные прокачивающие видео???? если да то очень здорово! очень заходят такие видео и интересно и полезно!
Думаю будет
Урок хороший жалко нет стилей для карточек.
Можете в качестве д/з добавить!
Спасибо большое! как же все это запомнить где и что применять....🤔🥸🧐
Запоминать наверное не нужно.... просто в нужный момент загуглить)
@@stackdev что гуглить тоже нужно понимать, а для этого четко знать следующий шаг. :)
не люблю комментировать. но тут не удержался. я нулевой. много читал тесты прошел. а понял все только после вашего видео. что это, зачем это, как думать тут. спасибо огромное.
спасибо!
Coooollllll!!!!
Спасибо!
Возможно ошибаюсь ноооо DOM -document obj model, возможно специальная оговорочка))) для роста комментов
Вы все правильно говорите - я оговорился)
👏👏👏
Спасибо!
Приветствую, отличный урок! Хотел бы спросить, что за плагин вы используете, который позволяет работать emmet внутри обратных кавычек?
spasibo, like i podpiska s menia
Спасибо за поддержку!
Добрый день. Отличный материал, доступно для понимания. Единственное хотел вас попросить поподробнее объяснить момент
"const deleteCard = (event) => {
const currentButton = event.currentTarget;
currentButton.closest('.autoCard').remove();
};"
Не могу понять каким образом происходит удаление всей карточки, ведь event.currentTarget (если я правильно понял) указывает на кнопку "button". Как получается, что удаляется весь div, в котором находится button?
Спасибо.
Добрый день! Выведите в лог - значение currentButton.closest('.autoCard') ...
Благодарю за прекрасный урок. Василий а подскажите пожалуйста, страница которая сформирована по такому принципу не будет индексироваться поисковиком? ведь html файл у нас практически пустой.
подписался
Прикольно, на второй раз повторяю, ибо с тренажерами по DOM совсем туго. Немного не понятно, зачем используются устаревшие элементы вставки.