Уроки Javascript #5. Как Работать с DOM в JS? (+ 26 упражнений для полной прокачки).
HTML-код
- Опубликовано: 5 фев 2025
- Мой 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-элементов в js и везде натыкался на сухую теорию, где ничего непонятно. А тут за час буквально разобрался, сразу поэкспериментировал и сразу все начало получаться. Спасибо огромное, мужик, кто бы ты не был.
Спасибо вам за поддержку!
Спасибо! Без воды и размышлений, коротко - что, зачем и почему. Нравится такой подход, по видео всё было понятно.
Спасибо!
Вообще странно, что ваш канал столь малочислен. Лично мне очень нравится ваш подход к обучению. Спасибо и не останавливайтесь )))
Спасибо! Будем работать
Наберёт своё ещё.
Согласень на 100%
глубоко! сначала не уделял внимания ДОМ элементам, но теперь я точно уверен, что это основы основ.
Блин, даже HTML не нужен как таковой в принципе.
Подробнейшее видео, что мне доводилось смотреть на эту тематику. Все быстро, без лишней воды, без непонятной информации! Спасибо!
Спасибо!
@@stackdev для мало мотивированных людей добавлю - мне 37 лет, 16 из которых работал в сфере торговли и частного бизнеса. Учусь уже 3 месяца полных на front-end. Продвигаюсь тяжело, но прогресс идет. Лично это видео уже пересматриваю четвертый раз. Многое запоминается не сразу, часто вскрывается какая-то информация лишь спустя несколько дней при решении другой задачи. Не унывайте, все кто начал учить и считает что это тяжело - ДА, ЭТО РЕАЛЬНО ТЯЖЕЛО! Но ты либо делаешь что-то, либо ноешь и смотришь на то, как у других получается ))
@@volodymyrdubinkin4823 Еще добавлю.
1) Если бы все было просто, то:
- было бы намного больше людей, которые этим занимаются...(соответсвенно зарплаты ниже, конкуренция выше и т д).
2) Повторение - мать учения. Если что-то непонятно сразу - "долбите" и понимание придет!
@@stackdev ещё хочется добавить, что программисты - это не обособленные, одаренные Господом люди! Это такие же люди как и все остальные, толко приложившие многим больше усилий, что бы выучить и продолжать изучать и далее все это дело. Вопрос времени - сколько вы готовы уделять этому делу своего личного времени, сможет ли вас понять и поддержать семья(если у вас она уже есть), готовы ли вы жертвовать своим свободным временем в угоду учебы, как вы будете мотивироваться, когда руки уже опускаются и хочется послать все к черту и подумать о более простом варианте заработка. Ну и мое личное мнение - это должно нравиться лично вам! Через силу, мне кажется, это работать не будет
@catsapp animation Обучение продолжаю, не бросаю, хотя и трудно.
Самое лучшее наглядное объяснение по работе с DOM, спасибо!)
Спасибо!
смотрел у других уроки по DOM, было не совсем понятно, у вас более хороший подход, спасибо вам за урок!
Спасибо!
В третий раз берусь за JS, с версткой все впорядке, никаких глобальных проблем нет - побольше практики, как говорится, но как только сажусь за JS сразу начинается паника, вообще какой-то непроглядный темный лес! Спасибо, ваш подход упрощает мне жизнь, как минимум)
@catsapp animation все ок, нативный не вызывает проблем, учу реакт
@@aksenovkirill5191 прошло 2 года. как обучение. просто у меня тоже паника от js
Вот это я, понимаю человек заморочился. Объясняет как никто до этого. Спасибо.
Спасибо!
это ахуенное видео! вот правда! пересмотрел кучу фронтов такого простого и супер понятного никто не делал! респект!
Спасибо!
Я в восторге, спасибо! Новичкам после теории перейти к практике ой как тяжко. Не знаешь что и где и как применять. Ваше видео бесценно!
спасибо!
Замечательная подача информации,
куча проработанных методов на примерах,
очень доходчиво и понятно!
Вам огромная благодарность за ваш труд.
Спасибо за поддержку!
Василий, считаю Ваши объяснения и манера подачи материала одними из лучших в инете!!!
Оч приятно! Спасибо за поддержку
наконец практика JS!)спасибо. Теории на просторах РФ ютуба много больше чем практики. Спасибо!
Спасибо!
редко благодарю авторов, но за такие примеры (за то, что ты позаморочился) спасибо тебе огномное!
пойду переделывать то же самое, но уже самостоятельно
Спасибо!
Чувак, никогда не думал, что буду это учить, но ты попал в самую суть: мне нужен JS для Интернета вещей)
Спасибо, Ваш вариант лекции DOM оказался самым классным. Подписался на Ваш канал. Удачи!
Спасибо за поддержку!
Василий спасибо большое! ))) В третий раз берусь за JS - с Вами аж полегчало! )))) А то на DOM прямо паника какая-то была... Всё доступно и воспринимается хорошо. Хорошее дело делаете! респект Вам! И удачи!
Спасибо!
Да здорово. Столько всего было сделано в одном видео Спасибо Вам
БОЛЬШОЕ спасибо за этот урок! Следующие жду с нетерпением!
Спасибо!
Вообще очень нравится такое спокойное и последовательное повествование к тому же и дикция у автора замечательная и сноски с объяснениями все по делу)
Спасибо!
Спасибо большое, шикарное объяснение и без воды! Только наткнулась на ваш канал, теперь хочу посмотреть все ваши видео
Спасибо!
подтверждаю))
Спасибо! оригинальный подход и очень удобный для освоения! Мастер!
Супер практическая обучалка!!! То что надо! Спасибо огромное! Пожалуйста продолжайте снимать такой контент! Я и мои друзья готовимся к собеседованиям по вашим видео.
Спасибо!
отлично 👍👍👍 мне очень понравилось!
Спасибо!
@@stackdev если можно сделайте еще такие упражнения с DOM, спасибо заранее)
Спасибо большое за видео. Понравилось то, что рассмотрели только те аспекты DOM-дерева, которые используются чаще всего, а не стали делать видео на полтора часа, объясняя все фичи - даже те, которые в жизни не пригодятся)
Спасибо!
Крутой канал, крутой учитель. Спасибо, я к вам!
Спасибо за поддержку!
Здравствуйте. Мне очень понравился Ваш канал и подача материала. Спасибо Вам большое за знания которыми Вы делитесь. Пожалуйста продолжайте выпускать подобные видео по Js.
Спасибо!
Огромное спасибо за такое обучение, честно скажу, сколько курсов пересмотрел... но вы все объяснили классно, очень быстро запоминается материал, научился новому у вас, спасибо так держать)))
Спасибо!
Это было доступно понятно и оч круто! Огромное спасибо! иду по следующим видео
Спасибо за поддержку!)
Спасибо большое за ваш труд. Урок позволил вспомнить то, что было забыто при использовании фреймворков.
как раз начал изучать ДОМ, очень полезное видное, особенно радует,что есть развернутое объяснение *что мы делаем в данный момент*) спасибо)
Спасибо!
Отличный канал и отличное объяснение. Спасибо большое. Помогаете учиться.
Спасибо!
Желаю вашему каналу процветания и успехов, спасибо огромное за ваши уроки вы Лучший!
Спасибо!
Большое спасибо за урок! Вы очень помогли мне.
Спасибо Вам )))Живите долго и счастливо . Практика супер 👍👨💻
Невероятно крутой урок.
Зная основы JS, имея слабенький опыт и некрепкие знания сборки динамических HTML страниц, этот урок прям то, что нужно. Шпаргалка по основам! И всего за каких то 30 минут, бомба ;)
Спасибо!
Спасибо за отличный урок!👍 Буду смотреть остальные...
Спасибо за поддержку!
Прикольный метод упражнений )
Спасибо!:)
Спасибо. отличный урок. 🎉
Спасибо, очень классная подача материала, продолжайте и не останавливайтесь. У Вас всё впереди!
Спасибо! Такие комментарии очень мотивируют:)
Спасибо тебе добрый человек
Как же это полезно и интересно! А то уже скучно одни теории слушать.. Лайк и подписка)
Спасибо!
Класс все подробно изложили.. ) спасибо огромное.)
Спасибо!
Очень крутое видео и интересный подход к обучению!!!
Спасибо!
Просто огромное спасибо!! Вам успехов в продвижении канала!
Спасибо за поддержку!
Наконец-то я многое поняла, что раньше было для меня сложным
Эта подача Ваша - просто нечто! Спасибо за такой труд :3
Спасибо!
Огромное спасибо за ваш труд, лайк и подписка)
Спасибо!
Понравился и еще как. Вы молодец!!!!
Спасибо!
Спасибо за урок! Пожалуйста продолжайте! у вас очень хорошо получается!
Спасибо!
Спасибо за видео))
Очень круто! Про adjacent и parentElem дажe не знал. Спасибо за топовый контент 👍
Спасибо!
Спасибо за супер полезный урок
Спасибо за поддержку!
@@stackdev скоро сам буду проходить собес на джуна, и ваши видео очень помогают структурировать информацию
@@ЗапасЗнаний Удачи! В каком городе?
@@stackdev спасибо. Живу в Сочи, а проходить с разными, кто работает удаленно из других городов
@@ЗапасЗнаний Ну круто!
Очень понятно и четко , спасибо вам большое!
Очень доходчиво! Благодарю Вас!
Спасибо!
Спасибо, очень полезный урок!
Спасибо!
Очень понятно и круто! Спасибо огромное, прошел дважды для закрепления, второй раз уже сам всё заполнил (хоть и немножко более "грязным" кодом)
Спасибо!
Спасибо вам Василий. начал изучать js с 0 по вашим видео :) Пока всё понятно.
Спасибо за поддержку!
Подписка - однозначно!
Спасибо!
Спасибо! Контент шикарный, все понятно
Спасибо за коммент!
Очень здорово, спсибо!
Спасибо!
Спасибо! Очень интересный урок 👍
Спасибо!
Спасибо огромное-преогромное!!!😘
Спасибо!
Благодарю, очень помогли!
Прекрасный урок! Спасибо
Спасибо!
Замечательное видео! Спасибо за Ваш труд.👍
Спасибо за поддержку!
Спасибо за видео!
Очень полезное видео
Спасибо!
класс
именно такой урок я и искал
Просто ТОП учитель!
Спасибо!!
Спасибо за поддержку!
очень понравился материал
Огромное спасибо
Спасибо, Lesson - 🔥
Спасибо!:)
Спасибо за уроки ! Продолжайте в том же духе ! Надеюсь , найдете время сделать цикл видео по jQuery
Спасибо! JQuery давно не трогал:)
будут еще подобные прокачивающие видео???? если да то очень здорово! очень заходят такие видео и интересно и полезно!
Думаю будет
круто, спасибо!
Спасибо огромное!
Отличный канал ,вот честно ))) Продолжайте ))Только как то слишком,быстро все ,хотелось бы подробней ))
Спасибо! здесь хотел в общих чертах пробежаться - подробнее в других видео
так если непонятен какой-то метод, то нужно просто остановить видео и идти в документацию почитать для чего он
@@Poiissonn Все верно - найти на MDN полное описание
@@stackdev а почему в описаниях, мне не всё понятно? Можете дать направления над чем работать?
@@bezbezov8867 Что конкретно не понятно (пример)?
Спасибо!🎉🎉🎉🎉
Coooollllll!!!!
Спасибо!
Дякую, було корисно!
Спасибо большое! как же все это запомнить где и что применять....🤔🥸🧐
Запоминать наверное не нужно.... просто в нужный момент загуглить)
@@stackdev что гуглить тоже нужно понимать, а для этого четко знать следующий шаг. :)
Спасибо)))
Очень наглядно)))
Топчик🎉
Тот момент когда не хочешь чтобы заканчивалось видео)
Спасибо!
Спасибо
Приветствую, отличный урок! Хотел бы спросить, что за плагин вы используете, который позволяет работать emmet внутри обратных кавычек?
не люблю комментировать. но тут не удержался. я нулевой. много читал тесты прошел. а понял все только после вашего видео. что это, зачем это, как думать тут. спасибо огромное.
Благодарю за прекрасный урок. Василий а подскажите пожалуйста, страница которая сформирована по такому принципу не будет индексироваться поисковиком? ведь html файл у нас практически пустой.
Спасибо большое! Вопрос можно ли сделать так: div.insertAdjacentHTML('afterBegin', elemHTML);
вместо того чтобы ul помещать в отдельную переменную? Это из пункта "// Поместить этот DIV до элемента
" Спасибо
Добрый день. Отличный материал, доступно для понимания. Единственное хотел вас попросить поподробнее объяснить момент
"const deleteCard = (event) => {
const currentButton = event.currentTarget;
currentButton.closest('.autoCard').remove();
};"
Не могу понять каким образом происходит удаление всей карточки, ведь event.currentTarget (если я правильно понял) указывает на кнопку "button". Как получается, что удаляется весь div, в котором находится button?
Спасибо.
Добрый день! Выведите в лог - значение currentButton.closest('.autoCard') ...
spasibo, like i podpiska s menia
Спасибо за поддержку!
Возможно ошибаюсь ноооо DOM -document obj model, возможно специальная оговорочка))) для роста комментов
Вы все правильно говорите - я оговорился)
спасибо!
Прикольно, на второй раз повторяю, ибо с тренажерами по DOM совсем туго. Немного не понятно, зачем используются устаревшие элементы вставки.
очень круто, нужно практиковаться.... спасибо, подписался
Но у меня почему не получились карточки, вроде все написал как у вас. А вышло вместо карточек, обычные Абзацы (
спасибо. сверяйтесь с готовым проектом