JavaScript Document object model (DOM) за час. Изменение HTML CSS. Атрибуты и свойства. Окружение.
ฝัง
- เผยแพร่เมื่อ 3 พ.ค. 2024
- 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
🤟 Живи, а работай в свободное время! ©
![ลุ้นมาก! รกต่ำไม่หายจะทำไงดี? [cc] แดนแพทตี้ SS2 | EP.40 |](http://i.ytimg.com/vi/_ub8lf45Vtg/mqdefault.jpg)
РЕПОСТ!
🔴 Карта канала: 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 приложение
Как говорится нет непонятливых людей, есть только люди которые неправильно объясняют.
Жека жму руку, тебе за все твои уроки Спасибо Тебе
Пожалуйста!
Каждый раз, включая очередное видео, и слыша заветную фразу: "Привет, это фрилансер по жизни" понимаю, что дальше будет что-то мега-полезное и интересное😃
Жека, огромное спасибо тебе за твой труд и качественный материал!👍
Я рад! Пожалуйста!
Ещё не дошёл до этого урока, но зашёл чтобы поставить лайк и поддержать видео. В тоооооп!!!!
Спасибо!
Аналогично) тоже еще не дошла до урока, но пришла с лайком)
)) Саме так))
Я такого простого и быстрого разжовывания DOM еще не видел. Очень быстро и доходчиво!
Спасибо!
Я рад! Пожалуйста!
Кто они эти 42 дизлайкнувших видео?? Это просто уму непостижимо! По одной из самых непростых, но интересных тем собрана выжимка всего основного, что необходимо для работы на начальном этапе! Лайк - это самое меньшее, чем можно отблагодарить автора. ✌
Спасибо!
Это конкуренты, которые ведут платные курсы )
наверное те, у кого глаз дёргается, от английского произношения))) видео, конечно, супер и правда полезное, но английский....Если меня так будут спрашивать на собеседовании про прэвиас саблинг - я ничего не пойму, потому что в моей голове это привиус сиблин, ибо мой английский лучше, чем программистский)))
-Теть Галя, а Жека DOM-а ?
- Заходите ребята, он как-раз новое видео записал
Ахах)
Для тех кому сложно - делите видео по частям.Например 10-15 минут посмотрели,попрактиковали,потом еще 15 мин.Это лучше чем сто раз смотреть длинные видео в итоге нечего не запоминать).
Я вообще исключительно с конспектом смотрю ))
тайм-коды в помощь в описании
Я ще й конспектую. Бо так звик))
Скажи, для тех кто в панике, пожалуйста, это все нужно в памяти держать? !! Именнно, что , куда и для чего? Прямо не понимаю. если да, мне сто лет нужно....и бросать не хочется, и выучить, как по мне - НЕВОЗМОЖНО на память.
@@sergkyrios Всё придёт потихоньку. Он это рассказывает слишком много и информативно, это огромный плюс. Ты не должен всё сразу запоминать, это придет с практикой. Когда что-то понадобиться ты начнешь использовать и так ты освоишь много, но по чуть-чуть каждый день/неделю/месяц
35:56 - чисто моя реакция, когда смог изменить строчку с помощью js и уже представляешь себя великим фронтендером 😂😂😂
Огромное спасибо Жене, с ним за час я понял то, чему меня в колледже мурыжили месяцами!! ❤️👊🤗
а моя на 54:40, когда меняла цвет объекту. Магия 😃
ДА!!! Я повелитель кода! )))))))))
Получаю кайф во время просмотра данных роликов. Получаю большой заряд позитива, много ценной информации и применяю это на практике. Трудно представить какой труд проделал автор, чтобы предоставлять такой годный контент в лучшем формате. Большое спасибо!
Жека, спасибо! 🔥👍
Домашка:
№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];
Можно просто дописать этот нолик в конце и всё тоже
@@aspid109 Точно. Спасибо!
@@user-ym8mg1wi8t тут настрлькр дружелюбное сообщество, что иногда аж странно как то
@@aspid109 Какой Жека, такое и сообщество! 🤣👍
Получаю удовольствие от просмотра такого качественного контента. Видно что человек вкладывает в это дело свою душу. Благодарю!
Создание новых элементов - Поздравляю у вас divочка)))))
Ахахах)
Боже, зачем нужны универы, если в них не обучают такие великолепные преподы как Женя)! Реально, спасибо огромное за такой труд. Чтобы объяснить так доходчиво и без воды в кратчайшие сроки - надо конкретно проработать материал и найти оптимальный подход. Спасибо, Сенсей!))
А Вы определились с тем, как Вы будет это применять на практике?
Я просто впевнений, що цей канал має стати найпопулярніший серед аналогів!
Чудова подача матеріалу!
Я звісно розумію, чому російською мовою подається матеріал, але було так круто мати таку якість подачі, тай ще і на рідній мові!
Дякую! На рідній є інтерв'ю
th-cam.com/channels/JNVBfLijFSa_tBcrNZKZag.html
@@FreelancerLifeStyle Знаю, і звісно передивився усі)
Материал, структурирование, изложение - супер! Спасибо за видео!
ЕвГений, спасибо тебе за труд, ждём продолжения по JavaScript. Я с огромным удовольствием смотрю твои курсы по верстке, теперь буду смотреть по JS. Благодаря детальному разбору и наглядным примерам все становится понятней. Будь здоров и счастлив!!!
Как всегда: доступно, понятно и реально нужно!!! Лишним голову не забивает, всё для дела!!! Спасибо Евгений))))
Не устаю пересматривать этот шедевр преподавательского искусства. Спасибо большое за старания
Женя, спасибо, что подарил нам DOM!
Пожалуйста))
Долго этого ждал, и дождался. Ух, ну Женя информации насыпал так насыпал😁. Видео супер. Все разложено по полочкам, кратко, ясно и без воды. Спасибо огромное за видео и за контент в целом. Тут 10 лайков ставить надо😁.
Супер! Это квинтэссенция информации по DOM. Великолепный контент. С тайм кодом можно использовать как справочник. Наснаги автору!
Очень интересно и познавательно! Спасибо Жене за большой и бесплатный труд)
Женя, пожалуйста, сделай видео по JS с некоторыми "трудными темами", чтобы наша картина была полной, спасибо за такое крутое объяснение!!!!
Человечище!!! Спасибо за эту огромному работу!!!
Подача как всегда на высшем уровне ! Браво!!!)
Как же я жду следующий урок!) Самый лучший и полновесный урок по DOM в этой части Галактики!
Спасибо, работаю над этим
простое "спасибо" даже стыдно говорить. не найти слов благодарности для такого человека, как вы! вы просто так дарите людям такую невероятную возможность овладеть новой профессией, прикладывая к этому столько стараний. низкий вам поклон за такой труд! 💙💛
Очень полезный урок! Море нужной информации! Очень впечатляет твоя подготовка к уроку, и вот эти моменты с "я подготовил шпаргалку" :)
Очень признательна за видео информацию, где есть только то что необходимо😃
Сильнейшим образов благодарю вас! Невероятно полезный и важный урок. Спасибо за ваш труд!
Парень ты очень крут, спасибо тебе за твой труд, все четко и по делу. Ты преподаватель от бога! Из всех что сомтрел курсов - твой самый лучший и понятный!
С тобой всегда всё легко и понятно , спасибо тебе за твой труд
Огромное спасибо за урок!!! Я ещё не дошёл до этого урока, но зашёл поставить лайк, уже думал что по JS ничего не будет, а тут такое)
Спасибо!
Пожалуй самый лучший материал по этой теме. Очень круто и быстро раскрыл всю тему, теперь людям практику, практику, для закрепления.
Женя, хочу сказать спасибо за ваш канал, хотя я еще нахожусь почти у истоков изучения всех материалов что здесь есть, тем не менее пересмотрела уже курс по верстке, сверстала макет для новичков с адаптивом, сейчас вот приступила к курсу по JS, а далее наметила препроцессоры и сборщики. И вообще, просто не терпится если честно изучить все-все-все что у вас тут есть! В общем стараюсь придерживаться того плана что вы описали для обучения фронтенд-разработчика и как-то даже тормозить себя чтобы не хватать по верхам :). Вы даете огромную мотивацию и веру в то что все получится. До того как нашла ваш канал не было четкого понимания с чего начинать и как двигаться дальше на пути к желаемому. Еще раз спасибо! Вы лучший!
как успехи?
Спасибо большое за полезный урок и материал.Одно из лучших объяснений по работе с DOM!!!
Огромное спасибо, только после просмотра данного урока смог решить свою задачу! Отличная подача материала!
У вас очень хорошая подача и вас приятно слушать. Уроки позволяют быстрее усваивать информацию, пусть и не с первого раза. Пожалуй продолжу готовиться к диплому, большое Спасибо за старания.
Удачи)
Титанический труд спасибо 🙏
Пожалуйста!
Спасибо вам за все, что вы делаете! Ваш канал просто золото!
Лучшее объяснение ДОМа, что я видел на ютюбе. Спасибо, Женя!
Якісний контент. Структурований, послідовний, доступний, справді навчальний матеріал, а не просто збірка інформації по темі. Також чудовий звук, картинка і ще багато іншого. Робота, яка вартує більшого ніж вподобайка. Лишилось попрацювати над вимовою англійських слів, чим Женя зараз займається, наскільки мені відомо і в чому я бажаю йому успіху
Спасибо большое за курс. Даже не знаю, как бы я без Ваших видео-уроков учила бы JavaScript)) все же я впервые учу js , раньше даже , пока не нашла этот курс , думала , что придется пересматривать кучу всего чтобы понять каждую тему, но тут сразу все понятно)) темы вроде как и более сложные в этом видео уроке, чем в прошлых, но с таким хорошим объяснением, все начинаю сразу понимать))
Как сильно я ждал DOM! Огромное спасибо!
Супер! дякую за живий стиль подачі!
Жека, спасибо тебе за труд! Я с огромным удовольствием смотрел твой курс по верстке, теперь буду смотреть по JS. Детальный разбор и наглядные примеры. Благодаря тебе все становится понятней. У тебя талант!
Спасибо! Я рад!
Видео отличное. Приятно изложенный материал. Учить с вами что-то - одно удовольствие! Спасибо большое за ваш труд
Суперская подача информации! 🔥
Спасибо! 👍
Женя, прошёл уже почти года, учил с тобой все с нуля.. прошёл все по верстке, все записал в конспект и все сделал на практике! Был патроном, и даже уже устроился на работу :) хоть и работаю бэкенде, но тебя продолжаю смотреть и тема dom как ни когда к стати!
Твоя подача и шикарный голос будто бальзам на душу 🤣🤣🤣 респект тебе
За сколько месяцев учений вы смогли устроиться на работу?)
@@goodgamershow6505 фронту уделил 2 месяца и беку(php) 4 месяца и разослал резюме в 3 компании 2 из которых позвали на совбез и обе же дали офер! Главное верить в свои силы и показать заинтересованность в работе. 24.03 будет ровно год с первого моего рабочего дня. Удачи в учёбе
@@Avyazovoi какой у Вас возраст?
@@Node2020 будет 32 через месяц
Пересматриваю видео, спасибо за такой качественный материал!
Спасибо Вам, Евгений! Супер уроки. Один из любимых каналов. Очень рада что теперь тут и JS
Спасибо!
Дякую, Женя, за корисний контент! Респект!!!!!!!!!!
Жека, ты красавчик. Благодаря тебе HTML и CSS выучил, и с JS тоже сильно помогаешь!
Господи, Женя живи вечно, здорово и счастливо и не бросай записывать такие крутые уроки!!! Спасибо огромное! С твоих уроков начался мой путь и никого лучше тебя в преподовании нет! Браво! P.S.: Наконец-то до меня дошло!
Я рад!
Очень объемный урок, большое количество серьезного материала. На изучение потребовалось, как минимум, раза в четыре больше времени чем длится ролик. Спасибо.
Как всегда концентрация полезности просто зашкаливает. Чую еще не раз буду пересматривать! Большое спасибо за такую качественную работу!!!
Пожалуйста!
Не устану повторять - ТОООООП. Спасибо за хорошо структурированную инфу и такую же подачу.
Женя, спасибо тебе огромное! Не останавливайся, ты помогаешь многим
Прекрасный урок! Женя, спасибо!
Спасибо за твой труд! Не одни курсы такие знания и подачу материала не предоставят!)
Пожалуйста!
Спасибо большое за уроки! Дякую за праццю, та якнайшвидшой перемоги!
Просто лучший контент для новичков, особенно по вёрстке!) Спасибо, Жека!!!
Восхитительное объяснение! С нетерпением буду ждать продолжения! Спасибо большое!
Пожалуйста!
Супер ! Спасибо огромное за Ваши старания! Видео урок 🔥🔥🔥
Пожалуйста!
Евгений, вы ювелир! :D
Спасибо!
Это гениально, лучшее видео на ютубе по DOM
Жэкины уроки как бальзам, спасибо за твой труд!
Долгожданный урок!!! ❤️🙏
Это да)
Ура, наконец-то одна из самых важных тем! Спасибо большое
Пожалуйста!
Спасибо!! Теперь я понял зачем нужен React. Но то как ты подаешь базу - очень круто! Спасибище
один из лучших на ютубе в плане объяснения JS
Вподобайка). Відео подивлюсь потім, коли доберусь до цієї теми).
Сейчас чисто объективный комментарий - лучше этих видосов по вёрстке просто не существует! Жека ты лучший, спасибо тебе)
Я очень рад! Пожалуйста!
Это монументальный труд) Въехал в DOM полностью)
Море полезной информации. Супер, спасибо.
Дуже дякую за урок, коли дивлюся твої відео завжди забуваю про час. Учитись одне задоволення дякую.
Лично для меня Жека смог расставить всё "по полочках" в теме DOM. С самого начала обучения JS я недопонимал DOM и работу с ним. Раз даже пытался заучить на память))) Теперь пришло полное понимание. Спасибо!
Евгений, ты гений! Спасибо за уроки!
Как всегда на уровне, урок пушка! Спасибо за труды :)
Нет слов. Женя, спасибо тебе огромное! Все очень понятно и доходчиво, просмотрела на одном дыхании, кое-что себе даже законспектировала))) Ты лучший учитель! Процветай!
Спасибо большое!
Жека, как всегда топ урок! Лучше, чем и некоторые платные, ты просто спаситель.
С нетерпением ждём следующий урок ✌️🎉👍
Спасибо!
Велике спасибі за ваші старання,чудовий і дуже корисний урок дякую!!!
Будь ласка!
Спасибо тебе за классные уроки , после них прям хочется идти творить чудеса в js.
Я рад!
Жека спасибо тебе огромное! Я как раз по твоему уроку решил задачу с которой не мог справиться несколько дней.
Мне не позволяла как выяснилось, статичная коллекция! Я и знать не знал что такое есть, а тут посмотрел твой урок и увидел прям свою ситуацию с необходимостью получить живую коллекцию. И все получилось!!!!!
Ты просто невероятный чувак), хотя признаться я не от всех твоих уроков в восторге, но одно точно, что ты всё делаешь не зря и ты делаешь очень нужное и полезное дело! Спасибо тебе огромное!
Жека, я хочу ещё раз выразить тебе свою благодарность за твою работу и твои уроки) Благодаря тебе я стал гораздо лучше разбираться в JS)
Выпуск бомба. Почти никогда не пишу комменты, но этот выпуск действительно очень крутой, ведь умение правильно работать с домом это очень важный навык. Жека, большой тебе респект!))
Очень круто!Обучаюсь на курсах и после занятия,где особо ничего не понимаю сразу же смотрю твои видео.Сегодняшний день не стал исключением!Ты лучший!Все доступно и понятно,каждый шаг подробно описан!Снимай еще видео по JS!!!
афигенный видеокурс! Ты помог мне начать программировать сайты, теперь повторяю забытое по твоим уроках. Спасибо за старания!
Брат, дай бог тебе здоровья и счастья!
Спасибо!
Спасибо за ваши курсы. Заметил реальный прогресс в веб разработке. Продолжайте в том же духе, желаю удачи!
Спасибо!
Спасибо огромное! Самый лучший препод!
Благодарю вам за ваш труд!
Спасибо, огромное! Я просто представляю, какой это гигантский труд, так грамотно составить объяснения, что бы дошло даже до меня! Потому что, сколько я не пыталась понять, что такое DOM, ни кто толком объяснить не мог. У Вас получилось. Я теперь более уверенно буду учиться дальше и у Вас в том числе.
Я рад что полезно!
Спасибо, Женя! С меня лайк и поделиться не забыл. Очень рад, что открыл для себя твой канал, желаю тебе всестороннего развития твоего канала. Спасибо!!!
Спасибо большое!
Пересматривать пройденный материал всегда полезно)
Целый день потратил что бы просмотреть и вникнуть в этот час.СПАСИБО
Чудовий урок! Лаконічно і структуровано . The best!
Дякую!