JavaScript Document object model (DOM) за час. Изменение HTML CSS. Атрибуты и свойства. Окружение.

JavaScript Document object model (DOM) за час. Это один из самых важных уроков по JS для верстки. Именно сейчас мы поймем как связан JavaScript с HTML и CSS. Научимся изменять HTML-код, а также CSS стили и классы. Поговорим об атрибутах и свойствах элементов, браузерном окружении JavaScript.

Спецификации:

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 - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©

[ivanosipau]

В общем пишу чтобы обьявить Жене благодарочку, в ноябре 2019 я, ничего не знающий и не понимающий в фронтенде, начал свой путь именно с этого канала, засматривал его до дыр. Сейчас я джуниор в хорошей компании, и я отдаю себе отчёт что Женин вклад в это очень значителен. Поэтому Женя, спасибо за твоё нужное дело, здоровья тебе и успехов!

[ffedchik]

На самом деле, дизлайки ставят люди, которые не могут найти ответ на вопрос почему раньше в их жизни не было такого грамотного учителя.

[artyomnazarov]

Каждый раз, включая очередное видео, и слыша заветную фразу: "Привет, это фрилансер по жизни" понимаю, что дальше будет что-то мега-полезное и интересное😃
Жека, огромное спасибо тебе за твой труд и качественный материал!👍

[konstantino]

Ещё не дошёл до этого урока, но зашёл чтобы поставить лайк и поддержать видео. В тоооооп!!!!

[xkfomii]

Как говорится нет непонятливых людей, есть только люди которые неправильно объясняют.
Жека жму руку, тебе за все твои уроки Спасибо Тебе

[PerfectLee-prby]

Кто они эти 42 дизлайкнувших видео?? Это просто уму непостижимо! По одной из самых непростых, но интересных тем собрана выжимка всего основного, что необходимо для работы на начальном этапе! Лайк - это самое меньшее, чем можно отблагодарить автора. ✌

[gin]

Создание новых элементов - Поздравляю у вас

[ymmgwit]

Жека, спасибо! 🔥👍
Домашка:
№1: Я поняла задание так, что в итоге в консоли необходимо увидеть значение атрибута, т.е. "yes":
const elemOne =
const attr =
console.log(attr);
или:
сonst elemOne =


№2:
const textElement =
const textElementContent = textElement.textContent;

или:
const textElement =
for(const elem of textElement) {
const textElementContent = elem.textContent;
if(textElementContent === 'Йончи') {

};
};
№3:
const elem =
console.log(elem);
№4:
Никуда не добавится, т.к. будет ошибка. Для решения проблемы необходимо использовать не метод ".querySelectorAll", а метод ".querySelector" и тогда текст вставится в виде третьего пункта <li> в конец тега <ul>.

[DmitriMironov]

Я такого простого и быстрого разжовывания DOM еще не видел. Очень быстро и доходчиво!
Спасибо!

[zcgzbev]

-Теть Галя, а Жека DOM-а ?
- Заходите ребята, он как-раз новое видео записал

[-shorts]

35:56 - чисто моя реакция, когда смог изменить строчку с помощью js и уже представляешь себя великим фронтендером 😂😂😂
Огромное спасибо Жене, с ним за час я понял то, чему меня в колледже мурыжили месяцами!! ❤️👊🤗

[Avyazovoi]

Женя, прошёл уже почти года, учил с тобой все с нуля.. прошёл все по верстке, все записал в конспект и все сделал на практике! Был патроном, и даже уже устроился на работу :) хоть и работаю бэкенде, но тебя продолжаю смотреть и тема dom как ни когда к стати!
Твоя подача и шикарный голос будто бальзам на душу 🤣🤣🤣 респект тебе

[MrAnonymous]

Для тех кому сложно - делите видео по частям.Например 10-15 минут посмотрели, попрактиковали, потом еще 15 мин.Это лучше чем сто раз смотреть длинные видео в итоге нечего не запоминать).

[andriystefanushun]

Я просто впевнений, що цей канал має стати найпопулярніший серед аналогів!
Чудова подача матеріалу!
Я звісно розумію, чому російською мовою подається матеріал, але було так круто мати таку якість подачі, тай ще і на рідній мові!

[zmeygorynych]

Сейчас чисто объективный комментарий - лучше этих видосов по вёрстке просто не существует! Жека ты лучший, спасибо тебе)

[gritsienkooleg]

Боже, зачем нужны универы, если в них не обучают такие великолепные преподы как Женя)! Реально, спасибо огромное за такой труд. Чтобы объяснить так доходчиво и без воды в кратчайшие сроки - надо конкретно проработать материал и найти оптимальный подход. Спасибо, Сенсей!))

[ViacheslavM]

Очень полезный урок! Море нужной информации! Очень впечатляет твоя подготовка к уроку, и вот эти моменты с "я подготовил шпаргалку" :)

[maxtwerskoj]

Огромное спасибо за урок!!! Я ещё не дошёл до этого урока, но зашёл поставить лайк, уже думал что по JS ничего не будет, а тут такое)

[kenkan]

Столько мало просмотров, за такой огромный труд, не справедливо

[kates]

Спасибо Вам, Евгений! Супер уроки. Один из любимых каналов. Очень рада что теперь тут и JS