JavaScript Document object model (DOM) за час. Изменение HTML CSS. Атрибуты и свойства. Окружение.
JavaScript Document object model (DOM) за час. Это один из самых важных уроков по JS для верстки. Именно сейчас мы поймем как связан JavaScript с HTML и CSS. Научимся изменять HTML-код, а также CSS стили и классы. Поговорим об атрибутах и свойствах элементов, браузерном окружении JavaScript.
👉Скачать материалы урока: www.fls.guru/files/tutorials/...
Спецификации:
DOM: dom.spec.whatwg.org/
BOM: html.spec.whatwg.org/
CSSOM: www.w3.org/TR/cssom-1/
Классы DOM-узлов: learn.javascript.ru/basic-dom...
💪 Платный курс по верстке: edu.fls.guru
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
00:00:00 - В уроке
00:00:29 - Что такое окружение JavaScript?
00:01:11 - Что такое браузерное окружение?
00:01:57 - Что такое BOM?
00:03:54 - Что такое DOM?
00:05:46 - Работа с DOM
00:06:00 - Навигация по DOM элементам
00:17:26 - Поиск объекта querySelectorAll
00:24:41 - Поиск объекта querySelector
00:25:46 - Поиск объекта getElementById
00:26:51 - Поиск объекта getElementsBy*
00:28:46 - Что такое "живая" коллекция?
00:30:34 - Какой метод поиска использовать?
00:31:00 - Поиск предка closest()
00:32:49 - Проверка matches
00:34:26 - Изменение DOM
00:34:47 - Изменение DOM innerHTML/outerHTML/textContent/data
00:41:22 - Создание DOM элементов и узлов
00:42:36 - Методы вставки в DOM append/prepend/before/after
00:45:46 - Вставка в DOM insertAdjacentHTML/Text/Element
00:48:11 - Перенос элемента
00:49:14 - Клонирование элемента cloneNode
00:50:20 - Удаление элемента remove
00:50:39 - Управление CSS стилями и классами
00:51:03 - Управление классами. Свойство className
00:52:07 - Управление классами. Свойство classList
00:54:11 - Управление стилями. Свойство style
00:57:07 - Получение стилей getComputedStyle
00:59:20 - Лайфхаки при работе со стилями
01:01:09 - Атрибуты и свойства
01:08:18 - Анонс
01:08:34 - Домашка
01:09:25 - Заключение
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
РЕПОСТ! 🔴 Карта канала: bit.ly/36r29xV 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle
Капитан, а где шпаргалка по уроку? Которая на 30:55. Посмотрел во всех файлах - нет её. Ссылка на шпору: disk.yandex.ru/i/pnW0LVxezhPRJw не благодарите)
Бро, аватарка вообще бесит. Как буд то ты троль левел 1000 Я понимаю что может ток меня бесить)так что сорян) но контент огонь спасибо тебе за инфу. Ты лучший) Но ава ваще фатал)
да, материал от профи не стыдно порекомендовать
@@user-ms5vu1zp9d ава это полный треш согласен )))))
На самом деле, дизлайки ставят люди, которые не могут найти ответ на вопрос почему раньше в их жизни не было такого грамотного учителя.
Ахаха)
согласен, абсолютли!))) Жека, ты крут👍
О чём вы? Нормальные люди ищут "дом" (очевидно с суффиксом "два"), попадают сюда и в ужасе уходят. Ведь не дай Бог такой "DOM" и его деревце ночью приснятся. Некоторые, самые стойкие, успевают поставить дизлайк. Но их мало.
Умнічка, підлизав!
@@FreelancerLifeStyle и те кто курсы продаёт)
В общем пишу чтобы обьявить Жене благодарочку, в ноябре 2019 я, ничего не знающий и не понимающий в фронтенде, начал свой путь именно с этого канала, засматривал его до дыр. Сейчас я джуниор в хорошей компании, и я отдаю себе отчёт что Женин вклад в это очень значителен. Поэтому Женя, спасибо за твоё нужное дело, здоровья тебе и успехов!
Спасибо на хлеб не намажешь :))
Супер! Я очень рад!
Какое было вступительное задание? если не секрет
@@Denis-ws1vn Да небыло задания, были собесы, стажировка, опять собесы, изучение фреймворков, и наконец трудоустройство.
@@ivanosipau3001 куда не глянь, все дают задания, типа сделать spa приложение
Каждый раз, включая очередное видео, и слыша заветную фразу: "Привет, это фрилансер по жизни" понимаю, что дальше будет что-то мега-полезное и интересное😃 Жека, огромное спасибо тебе за твой труд и качественный материал!👍
Я рад! Пожалуйста!
Как говорится нет непонятливых людей, есть только люди которые неправильно объясняют. Жека жму руку, тебе за все твои уроки Спасибо Тебе
Пожалуйста!
Ещё не дошёл до этого урока, но зашёл чтобы поставить лайк и поддержать видео. В тоооооп!!!!
Спасибо!
Аналогично) тоже еще не дошла до урока, но пришла с лайком)
)) Саме так))
Жека, спасибо! 🔥👍 Домашка: №1: Я поняла задание так, что в итоге в консоли необходимо увидеть значение атрибута, т.е. "yes": const elemOne = document.querySelector('[data-say-hi]'); const attr = elemOne.getAttribute('data-say-hi'); console.log(attr); или: сonst elemOne = document.querySelector('[data-say-hi]'); console.log(elemOne.dataset.sayHi); №2: const textElement = document.getElementsByTagName('li')[1]; const textElementContent = textElement.textContent; console.log(textElementContent); или: const textElement = document.querySelectorAll('li'); for(const elem of textElement) { const textElementContent = elem.textContent; if(textElementContent === 'Йончи') { console.log(textElementContent); }; }; №3: const elem = document.querySelectorAll('.like'); console.log(elem); №4: Никуда не добавится, т.к. будет ошибка. Для решения проблемы необходимо использовать не метод ".querySelectorAll" , а метод ".querySelector" и тогда текст вставится в виде третьего пункта в конец тега .
Ты супер, спасибо что есть с кем свериться!!
4 номер const element = document.querySelectorAll('ul')[0]; Можно просто дописать этот нолик в конце и всё тоже
@@thththththth_ Точно. Спасибо!
@@user-ym8mg1wi8t тут настрлькр дружелюбное сообщество, что иногда аж странно как то
@@thththththth_ Какой Жека, такое и сообщество! 🤣👍
Я такого простого и быстрого разжовывания DOM еще не видел. Очень быстро и доходчиво! Спасибо!
Я рад! Пожалуйста!
Кто они эти 42 дизлайкнувших видео?? Это просто уму непостижимо! По одной из самых непростых, но интересных тем собрана выжимка всего основного, что необходимо для работы на начальном этапе! Лайк - это самое меньшее, чем можно отблагодарить автора. ✌
Спасибо!
Это конкуренты, которые ведут платные курсы )
наверное те, у кого глаз дёргается, от английского произношения))) видео, конечно, супер и правда полезное, но английский....Если меня так будут спрашивать на собеседовании про прэвиас саблинг - я ничего не пойму, потому что в моей голове это привиус сиблин, ибо мой английский лучше, чем программистский)))
Я просто впевнений, що цей канал має стати найпопулярніший серед аналогів! Чудова подача матеріалу! Я звісно розумію, чому російською мовою подається матеріал, але було так круто мати таку якість подачі, тай ще і на рідній мові!
Дякую! На рідній є інтерв'ю kzhead.info/tools/JNVBfLijFSa_tBcrNZKZag.html
@@FreelancerLifeStyle Знаю, і звісно передивився усі)
35:56 - чисто моя реакция, когда смог изменить строчку с помощью js и уже представляешь себя великим фронтендером 😂😂😂 Огромное спасибо Жене, с ним за час я понял то, чему меня в колледже мурыжили месяцами!! ❤️👊🤗
а моя на 54:40, когда меняла цвет объекту. Магия 😃
ДА!!! Я повелитель кода! )))))))))
Для тех кому сложно - делите видео по частям.Например 10-15 минут посмотрели,попрактиковали,потом еще 15 мин.Это лучше чем сто раз смотреть длинные видео в итоге нечего не запоминать).
Я вообще исключительно с конспектом смотрю ))
тайм-коды в помощь в описании
Я ще й конспектую. Бо так звик))
Скажи, для тех кто в панике, пожалуйста, это все нужно в памяти держать? !! Именнно, что , куда и для чего? Прямо не понимаю. если да, мне сто лет нужно....и бросать не хочется, и выучить, как по мне - НЕВОЗМОЖНО на память.
@@sergkyrios Всё придёт потихоньку. Он это рассказывает слишком много и информативно, это огромный плюс. Ты не должен всё сразу запоминать, это придет с практикой. Когда что-то понадобиться ты начнешь использовать и так ты освоишь много, но по чуть-чуть каждый день/неделю/месяц
-Теть Галя, а Жека DOM-а ? - Заходите ребята, он как-раз новое видео записал
Ахах)
простое "спасибо" даже стыдно говорить. не найти слов благодарности для такого человека, как вы! вы просто так дарите людям такую невероятную возможность овладеть новой профессией, прикладывая к этому столько стараний. низкий вам поклон за такой труд! 💙💛
Создание новых элементов - Поздравляю у вас divочка)))))
Ахахах)
Якісний контент. Структурований, послідовний, доступний, справді навчальний матеріал, а не просто збірка інформації по темі. Також чудовий звук, картинка і ще багато іншого. Робота, яка вартує більшого ніж вподобайка. Лишилось попрацювати над вимовою англійських слів, чим Женя зараз займається, наскільки мені відомо і в чому я бажаю йому успіху
Боже, зачем нужны универы, если в них не обучают такие великолепные преподы как Женя)! Реально, спасибо огромное за такой труд. Чтобы объяснить так доходчиво и без воды в кратчайшие сроки - надо конкретно проработать материал и найти оптимальный подход. Спасибо, Сенсей!))
А Вы определились с тем, как Вы будет это применять на практике?
Женя, прошёл уже почти года, учил с тобой все с нуля.. прошёл все по верстке, все записал в конспект и все сделал на практике! Был патроном, и даже уже устроился на работу :) хоть и работаю бэкенде, но тебя продолжаю смотреть и тема dom как ни когда к стати! Твоя подача и шикарный голос будто бальзам на душу 🤣🤣🤣 респект тебе
За сколько месяцев учений вы смогли устроиться на работу?)
@@goodgamershow6505 фронту уделил 2 месяца и беку(php) 4 месяца и разослал резюме в 3 компании 2 из которых позвали на совбез и обе же дали офер! Главное верить в свои силы и показать заинтересованность в работе. 24.03 будет ровно год с первого моего рабочего дня. Удачи в учёбе
@@Avyazovoi какой у Вас возраст?
@@Node2020 будет 32 через месяц
Женя, спасибо, что подарил нам DOM!
Пожалуйста))
Огромное спасибо за урок!!! Я ещё не дошёл до этого урока, но зашёл поставить лайк, уже думал что по JS ничего не будет, а тут такое)
Спасибо!
Титанический труд спасибо 🙏
Пожалуйста!
Получаю кайф во время просмотра данных роликов. Получаю большой заряд позитива, много ценной информации и применяю это на практике. Трудно представить какой труд проделал автор, чтобы предоставлять такой годный контент в лучшем формате. Большое спасибо!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье
Получаю удовольствие от просмотра такого качественного контента. Видно что человек вкладывает в это дело свою душу. Благодарю!
Господи, Женя живи вечно, здорово и счастливо и не бросай записывать такие крутые уроки!!! Спасибо огромное! С твоих уроков начался мой путь и никого лучше тебя в преподовании нет! Браво! P.S.: Наконец-то до меня дошло!
Я рад!
Сейчас чисто объективный комментарий - лучше этих видосов по вёрстке просто не существует! Жека ты лучший, спасибо тебе)
Я очень рад! Пожалуйста!
Спасибо, огромное! Я просто представляю, какой это гигантский труд, так грамотно составить объяснения, что бы дошло даже до меня! Потому что, сколько я не пыталась понять, что такое DOM, ни кто толком объяснить не мог. У Вас получилось. Я теперь более уверенно буду учиться дальше и у Вас в том числе.
Я рад что полезно!
Как всегда: доступно, понятно и реально нужно!!! Лишним голову не забивает, всё для дела!!! Спасибо Евгений))))
ЕвГений, спасибо тебе за труд, ждём продолжения по JavaScript. Я с огромным удовольствием смотрю твои курсы по верстке, теперь буду смотреть по JS. Благодаря детальному разбору и наглядным примерам все становится понятней. Будь здоров и счастлив!!!
Очень объемный урок, большое количество серьезного материала. На изучение потребовалось, как минимум, раза в четыре больше времени чем длится ролик. Спасибо.
Видео отличное. Приятно изложенный материал. Учить с вами что-то - одно удовольствие! Спасибо большое за ваш труд
Велике спасибі за ваші старання,чудовий і дуже корисний урок дякую!!!
Будь ласка!
Женя, хочу сказать спасибо за ваш канал, хотя я еще нахожусь почти у истоков изучения всех материалов что здесь есть, тем не менее пересмотрела уже курс по верстке, сверстала макет для новичков с адаптивом, сейчас вот приступила к курсу по JS, а далее наметила препроцессоры и сборщики. И вообще, просто не терпится если честно изучить все-все-все что у вас тут есть! В общем стараюсь придерживаться того плана что вы описали для обучения фронтенд-разработчика и как-то даже тормозить себя чтобы не хватать по верхам :). Вы даете огромную мотивацию и веру в то что все получится. До того как нашла ваш канал не было четкого понимания с чего начинать и как двигаться дальше на пути к желаемому. Еще раз спасибо! Вы лучший!
как успехи?
Думаю у этого урока будет очень много просмотров. Оно много объясняет на практике, в частности для чего нам была нужна теория из предыдущих уроков по js. Кто не смотрел предыдущие уроки, обязательно смотрите. Мне очень помогло понять многие моменты и закрыть достаточное количество вопросов. Спасибо за урок. Как всегда, без воды и самый сок!) Только вперед!
Все верно, спасибо большое!
Взагалі лайк і закриваю! Ну тут той випадок коли треба зайти і сказати! У вас талан - пояснювати. Все супер: приклади чоткі, зрозумілі без лишньої води. Дякую!!!!
Спасибо большое за курс. Даже не знаю, как бы я без Ваших видео-уроков учила бы JavaScript)) все же я впервые учу js , раньше даже , пока не нашла этот курс , думала , что придется пересматривать кучу всего чтобы понять каждую тему, но тут сразу все понятно)) темы вроде как и более сложные в этом видео уроке, чем в прошлых, но с таким хорошим объяснением, все начинаю сразу понимать))
Материал, структурирование, изложение - супер! Спасибо за видео!
Ну що ж, я подивився, а потім ще раз дивився та конспектував... Фух, нарешті все завершив, та все вийшло, все протестив. Пішло купу годин, щоб законспектувати. Але тепер є своя шпаргалка! Дякую! Нарешті я трохи розумію як js працює з html та css
Парень ты очень крут, спасибо тебе за твой труд, все четко и по делу. Ты преподаватель от бога! Из всех что сомтрел курсов - твой самый лучший и понятный!
Столько мало просмотров, за такой огромный труд, не справедливо
Согласен)
Жека, спасибо тебе за труд! Я с огромным удовольствием смотрел твой курс по верстке, теперь буду смотреть по JS. Детальный разбор и наглядные примеры. Благодаря тебе все становится понятней. У тебя талант!
Спасибо! Я рад!
Брат, дай бог тебе здоровья и счастья!
Спасибо!
Супер! Это квинтэссенция информации по DOM. Великолепный контент. С тайм кодом можно использовать как справочник. Наснаги автору!
Неймовірно ефективна подача інформації! По ходу мало хто зробив 4-те завдання, а воно з приколом). До речі, lifehack: повторно відео краще дивитися на швидкості x2.
Евгений, вы ювелир! :D
Спасибо!
Долго этого ждал, и дождался. Ух, ну Женя информации насыпал так насыпал😁. Видео супер. Все разложено по полочкам, кратко, ясно и без воды. Спасибо огромное за видео и за контент в целом. Тут 10 лайков ставить надо😁.
У вас очень хорошая подача и вас приятно слушать. Уроки позволяют быстрее усваивать информацию, пусть и не с первого раза. Пожалуй продолжу готовиться к диплому, большое Спасибо за старания. Удачи)
Жека спасибо тебе огромное! Я как раз по твоему уроку решил задачу с которой не мог справиться несколько дней. Мне не позволяла как выяснилось, статичная коллекция! Я и знать не знал что такое есть, а тут посмотрел твой урок и увидел прям свою ситуацию с необходимостью получить живую коллекцию. И все получилось!!!!! Ты просто невероятный чувак), хотя признаться я не от всех твоих уроков в восторге, но одно точно, что ты всё делаешь не зря и ты делаешь очень нужное и полезное дело! Спасибо тебе огромное!
Сильнейшим образов благодарю вас! Невероятно полезный и важный урок. Спасибо за ваш труд!
Очень интересно и познавательно! Спасибо Жене за большой и бесплатный труд)
Пожалуй самый лучший материал по этой теме. Очень круто и быстро раскрыл всю тему, теперь людям практику, практику, для закрепления.
Огромное спасибо, только после просмотра данного урока смог решить свою задачу! Отличная подача материала!
Все грамотно и толково объяснено. Все понятно как дважды два. Очень хорошая подача информации. СПАСИБО! PS: Жаль только что какие-то идиоты ставят дизлайки. Наверное им жена не дала так они и гадят. А может и сами ведут говнокурсы, берут за это с людей бабки и при этом информацию дают как попало. Женя, не обращай внимание на этих идиотов! Ждем твоих новых уроков!
Спасибо!
Не устаю пересматривать этот шедевр преподавательского искусства. Спасибо большое за старания
Женя, пожалуйста, сделай видео по JS с некоторыми "трудными темами", чтобы наша картина была полной, спасибо за такое крутое объяснение!!!!
Как же я жду следующий урок!) Самый лучший и полновесный урок по DOM в этой части Галактики!
Спасибо, работаю над этим
Спасибо большое за полезный урок и материал.Одно из лучших объяснений по работе с DOM!!!
Очень полезный урок! Море нужной информации! Очень впечатляет твоя подготовка к уроку, и вот эти моменты с "я подготовил шпаргалку" :)
Как всегда концентрация полезности просто зашкаливает. Чую еще не раз буду пересматривать! Большое спасибо за такую качественную работу!!!
Пожалуйста!
Нет слов. Женя, спасибо тебе огромное! Все очень понятно и доходчиво, просмотрела на одном дыхании, кое-что себе даже законспектировала))) Ты лучший учитель! Процветай!
Спасибо большое!
Дякую, Женя, за корисний контент! Респект!!!!!!!!!!
Спасибо Вам, Евгений! Супер уроки. Один из любимых каналов. Очень рада что теперь тут и JS
Спасибо!
Самый качественный гайд/туторил/проводник как не называй это самый лучший видос про DOM и как с ним можно работать. Авторская подача и монтаж это the best в ру нете. Спасибо Жека что ты есть :)!
Я рад! Пожалуйста!
Лично для меня Жека смог расставить всё "по полочках" в теме DOM. С самого начала обучения JS я недопонимал DOM и работу с ним. Раз даже пытался заучить на память))) Теперь пришло полное понимание. Спасибо!
Супер ! Спасибо огромное за Ваши старания! Видео урок 🔥🔥🔥
Пожалуйста!
Подача как всегда на высшем уровне ! Браво!!!)
Смотрел разные уроки по js, и везде не понимал, что за .document все используют! Только начал вбивать про это - вижу твой выпуск, ну думаю ладно, посмотрю сначала тебя. И тут ты рассказываешь как раз что это и зачем! Всё, теперь максимально ясно, как связана наша любимая вёрстка и js. Спасибо большое, ждём след. выпуск про скролллы!. p.s. sibling - так же через "и" и произносим. больше сИблин, а не сАблин. =))
Спасибо
вот я тоже вчера написал про это камент, что непонятно про какой-то документ и откуда он берется почему раньше никто так не рисовал диаграммы и всякие связи что откуда берется?
Спасибо вам за все, что вы делаете! Ваш канал просто золото!
Долгожданный урок!!! ❤️🙏
Это да)
Человечище!!! Спасибо за эту огромному работу!!!
Кращий... Еталон підготовки та подачі матеріалу. Дякую! )
Будь ласка!
С тобой всегда всё легко и понятно , спасибо тебе за твой труд
Очень признательна за видео информацию, где есть только то что необходимо😃
Жека, величезна подяка тобі за освітню діяльність на благо суспільства !
Даже получилось написать код не подглядывая;))) Благодаря твоим урокам! Спасибо за твой труд!!!!!
Жека, ты красавчик. Благодаря тебе HTML и CSS выучил, и с JS тоже сильно помогаешь!
Дуже дякую за гарну подачу матеріала.
Будь ласка!
Снимаю перед тобой шляпу не только потому что "вошел" в DOM, но и в знак огромной признательности и благодарности!
афигенный видеокурс! Ты помог мне начать программировать сайты, теперь повторяю забытое по твоим уроках. Спасибо за старания!
Ура, наконец-то одна из самых важных тем! Спасибо большое
Пожалуйста!
Спасибо, Женя! С меня лайк и поделиться не забыл. Очень рад, что открыл для себя твой канал, желаю тебе всестороннего развития твоего канала. Спасибо!!!
Спасибо большое!
Спасибо за твой труд! Не одни курсы такие знания и подачу материала не предоставят!)
Пожалуйста!
Не устану повторять - ТОООООП. Спасибо за хорошо структурированную инфу и такую же подачу.
Спасибо за ваши курсы. Заметил реальный прогресс в веб разработке. Продолжайте в том же духе, желаю удачи!
Спасибо!
Огромное спасибо автору! Очень понятный и полезный урок, все по полочкам разложил. Лайк и подписка!
Спасибо!! Теперь я понял зачем нужен React. Но то как ты подаешь базу - очень круто! Спасибище
Жека, как всегда топ урок! Лучше, чем и некоторые платные, ты просто спаситель. С нетерпением ждём следующий урок ✌️🎉👍
Спасибо!
Лучшее объяснение ДОМа, что я видел на ютюбе. Спасибо, Женя!
Здравствуйте! Мой вариант выполнения домашнего задания. Задача №1. Получить в переменную элемент с атрибутом data-say-hi и прочитать значение этого атрибута. Привет! Решение. Способ 1. const data = document.querySelector('[data-say-hi]'); const result = data.getAttribute('data-say-hi'); console.log(result); Способ 2. const dataElem = document.querySelector('[data-order]'); console.log(dataElem.dataset.order); Задача №2. Получить в переменную элемент с текстом Йончи Корчи Йончи Решение. Важно. Нужно получить именно елемент, а не просто его содержимое (content). Получение в константу list 14-ого элемента списка (сквозной поиск). const list = document.querySelectorAll('li')[14]; Используя свойство outerHTML получаю html-разметку элемента + содержимое. const yonchi = list.outerHTML; console.log(yonchi); Задача №3. Получить в переменную коллекцию элементов с классом Like Решение. const like = document.querySelectorAll('.like'); console.log(like); Задача №4. Куда добавится элемент Текст? JS const list = document.querySelectorAll('ul'); list.insertAdjacentHTML( 'beforeend', 'Текст' ); HTML Пункт №1 Пункт №2 Решение. Если выполнять код по условию задачи то объект Текст никуда не добавиться. Консоль вернёт ошибку. Причина в совместной работе метода поиска querySelectorAll и методе вставки insertAdjacentHTML. Метод поиска ищет все доступные объекты в соответствии с указанным селектором. Затем метод вставки пытается вставить новый объект во все найденные методом поиска объекты. Но insertAdjacentHTML метод вставки, он применяется единожды одному выбранному объекту. Это не функция с циклом, которая вновь и вновь будет вставлять новый объект в во все ранее найденные. Как решить эту проблему? Есть два пути: 1. Добавить к методу поиска номер (индекс [ ]) конкретного объекта к которому нужно применить метод вставки. 2. Изменить метод поиска на .querySelector. Данный метод будет прекращать поиск сразу же после того, как найдёт первый соответствующий селектору объект. Остальные объекты с таким же селектором этот метод уже искать не будет. Поэтому, если нужно добавить новый объект к определённому узлу, то удобнее воспользоваться 1-ым способом. Либо использовать id. const list = document.querySelectorAll('ul')[5]; list.insertAdjacentHTML( 'beforeend', 'Текст' );
У меня решение Задания №2: let li = document.getElementsByTagName('li'); let liValue = li[1].innerHTML; console.log(liValue);
Дуже дякую за урок, коли дивлюся твої відео завжди забуваю про час. Учитись одне задоволення дякую.
Спасибо тебе друже за прекрасно структурированную информацию и хорошее объяснение! Молимся о прекращении войны.
Целый день потратил что бы просмотреть и вникнуть в этот час.СПАСИБО
Из Вас получится очень сильный учитель
Спасибо тебе за классные уроки , после них прям хочется идти творить чудеса в js.
Я рад!
Восхитительное объяснение! С нетерпением буду ждать продолжения! Спасибо большое!
Пожалуйста!
ассаляму алейкум всем кто смотрит Фрілансер всегда топ👍
Выпуск бомба. Почти никогда не пишу комменты, но этот выпуск действительно очень крутой, ведь умение правильно работать с домом это очень важный навык. Жека, большой тебе респект!))
Спасибо большое за уроки! Дякую за праццю, та якнайшвидшой перемоги!
ЦЕЛЫЙ ЧАС! Давно таких комплексных уроков не было. Спасибо что стараетесь для нас.
Пожалуйста!
Вподобайка). Відео подивлюсь потім, коли доберусь до цієї теми).