JavaScript DOM. Поиск элементов: getElement и querySelector

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@vitkul]

Спасибо за отличное видео. Особенно понравился акцент на нэйминге и дата-атрибутах.

[@РусланА-ф2н]

Я хоть и не новичок, но как же приятно видеть на просторах образовательного ру-контента такой крутой, понятный и полезный контент Александр, спасибо вам

[@ЕвгенийКолобов-х4з]

Спасибо за отличное видео! Очень полезно подчеркнул для себя информацию с именованием через data!

[@СтаниславГорячев-г1ъ]

Спасибо вам за очень полезный контент

[@miwanjaGR]

Крутые рекомендации по неймингу! Также топ пояснение про статические и живые коллекции!

[@mouri_san]

Спасибо, Александр!

[@SuvStreet]

Я не новичок, но очень понравилось, обращение внимания на нейминг переменных 😉👍

[@smotritelyoutube]

Нравится эта тема, супер, лайк!

[@svitboomer8840]

Лучший! Как всегда

[@biscvie]

Спасибо!

[@alexgrinberg1888]

Больше спасибо за видео. Очень помогло освежить знания. Можно в следующем уроке рассказать подробнее о том как работать с slot элементами? Как искать их по дереву и проходить в них. Вообщем все о slot. Спасибо большое.

[@AleksanderLamkov]

Про slot - это Web Components API? В рамках этого курса про это, увы, не будет. Это весьма специфичная тема. Но отдельное видео, в принципе, сделать не проблема. Мне и самому интереснее копнуть в эту тему глубже.

[@biscvie]

Жду полноценного платного курса, если в свободном доступе такой крутой формат, то что будет в курсе, если он конечно будет)

[@AleksanderLamkov]

Будет! Обязательно будет. И по качеству не хуже, чем бесплатные курсы на канале :)

[@biscvie]

@@AleksanderLamkov Спасибо!

[@Triplanar]

@@AleksanderLamkov А будет ли еще один мастер-класс по верстке с использованием JS или это и будет в платном курсе?

[@AleksanderLamkov]

Будет в виде бесплатного контента на канале. Сразу после окончания этого курса.

[@ProgVipe]

о, ты теперь и дом элементы будешь объяснять?) теперь только у тебя смотреть буду!

[@AleksanderLamkov]

Уже давно! Ну, пару недель назад начал ведь про JS в браузере рассказывать 😅 А впереди ещё два месяца концентрированного контента, по два видео в неделю 😎 Курс планирую закончить в октябре.

[@ProgVipe]

@@AleksanderLamkov подскажи, а когда апи изучать?

[@AleksanderLamkov]

После того, как в браузерном JS изучишь DOM (поиск элементов на странице, их свойства и атрибуты, размеры и координаты, управление стилями), события (понятия всплытия и погружение, делегирование событий, отмена дефолтного браузерного поведения, основные события мыши, клавиатуры, фокуса, событие отправки формы).

[@fj-ru8pp]

​@@AleksanderLamkov А о чем конкретно речь? Какое api? Вроде растяжимое понятие, не понял контекста😮

[@AleksanderLamkov]

Я подразумеваю тему клиент-серверного взаимодействия. Ну грубо говоря функция fetch, get / post запросы, обработка ответа от сервера, статусы запросов.

[@yabr87]

Я тоже предпочитаю использовать дата-атрибуты для поиска элементов. Стрелял пару раз себе в ногу с классами. Не критично но неприятно)

[@viktoria7281]

5:40 интересно почему разработчики забывают про это, это же удобно

[@AleksanderLamkov]

Удобно как раз таки от document всегда искать, указывая в аргументах CSS-селектор посложнее. Но производительнее будет по-возможности использовать уже имеющуюся ссылку на DOM-элемент и уже от него искать вглубь дерева.

[@Sharikov_stepan]

Какие могут возникнуть проблемы при поиске в DOM по классам?

[@AleksanderLamkov]

Никакие. Просто в моем понимании классы лучше использовать только в CSS-коде. Когда в JS-коде для доступа к элементам используются data-атрибуты, то при чтении разметки будет сразу понятно, какой элемент будет как-либо задействован в JS-коде, а какой нет.

[@AlekseiVavulo]

По душню... Псевдомассивы, такие как NodeList, возвращаемые методами вроде document.querySelectorAll(), часто фиксированы в момент создания. Это означает, что если DOM изменится, содержимое такого NodeList не обновится автоматически.

[@AleksanderLamkov]

Да, про разницу статической и живой коллекции было упомянуто в этом видео и в следующих уроках курса на этих особенностях неоднократно будет сделан акцент.

[@AlekseiVavulo]

@@AleksanderLamkov будет практика на нативном js?

[@AleksanderLamkov]

Да, и в рамках курса в конце некоторых уроках и в целом, после курса, будет серия видео по отдельным компонентам на ванильном JS и мастер-класс по верстке с JS.

[@Kotovar]

Слышал мнение, что querySelector не самый быстрый метод из подобных. Но вряд ли стоит учитывать это при оптимизации приложения?

[@AleksanderLamkov]

Хм, не слышал о таком. А какие есть альтернативы? Типа getElementsByClassName для поиска по CSS-классам? На мой субъективный взгляд по CSS-классам искать в DOM-дереве - не лучшая практика. А поиск по селектору атрибута, который я пропагандирую в этом видео, возможен только через методы querySelector и querySelectorAll. В любом случае - проблема querySelector быть может и есть, но высосана из пальца, т. к. на перформанс по-большей части влияют другие факторы, типа неоптимального расхода памяти (неиспользующиеся лишние переменные, отсутствие оных и написание однотипных повторяющихся выражений вместо сохранения результата выражения в промежуточную переменную, утечки памяти и т. д. и т. п.) В общем, проблема не в синтаксисе JS, а в том, как им пользуются разработчики :)

[@Kotovar]

​@@AleksanderLamkov Ну вот что к примеру getElementById - самый быстрый из-за внутренних оптимизаций браузера. Но лично я сам стараюсь только querySelector использовать :) Мне кажется - это из той же области, что var в каких-то случаях эффективнее работает чем let, const. Короче - тема для гиков и холиваров :)

[@viktoria7281]

5:31 интересно почему мы получим пустой nodeList а не null

[@AleksanderLamkov]

Чтобы было меньше ошибок в коде. С тем, что возвращает querySelectorAll, обычно работают так - перебирают методом forEach и выполняют какие-то действия, например: document .querySelectorAll('a') .forEach((element) => { … }) Если бы метод querySelectorAll возвращал null, пришлось бы делать дополнительные проверки: const linkElements = document.querySelectorAll('a') if (linkElements) { linkElements.forEach((element) => { … }) } Ну или применять повсюду оператор опциональной последовательности: document .querySelectorAll('a') ?.forEach((element) => { … })

[@viktoria7281]

9:24 ты сказал querySelector и querySelectorAll покрывает 99% задач поэтому не используются эти а getElementById забыл перечислить или почему не сказал его?

[@AleksanderLamkov]

У getElementById нет тех преимуществ, которые есть в рассмотренных после 9:24 методах. Он возвращает всегда либо null, либо ссылку на первый DOM-элемент с определенным id. И значение этого выражения будет актуально только на момент вызова метода. Другие же методы, getElementsByTagName, getElementsByClassName и getElementsByName всегда возвращают живую коллекцию HTMLCollection, в которой всегда будут содержаться актуальные данные, соответствующие текущему состоянию DOM-дерева.

[@viktoria7281]

форыч