kecilust / element-search

Домашнее задание к лекции «Способы поиска нужного HTML-элемента»

Необходимо выполнить и предоставить на проверку следующие задачи:

1. Всплывающие окна
2. Навигационное меню
3. Слайдер изображений

Все задачи обязательны к выполнению. Присылать на проверку можно только сразу все три задачи.

Работы должны соответствовать принятому стилю оформления кода.

Любые вопросы по решению задач задавайте в Slack-канале.

Бонус

В чём проблема document.getElementById ? В том, что для повторяющихся блоков мы очень быстро можем запутаться в идентификаторах.

Например, что если на странице 3, 5, 8 галерей изображений, у каждой из которых собственное управление стрелочками? Тут идентификаторов не напасёшься!

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

1. Информация о getElementById
2. Поиск: getElement* и querySelector* и не только
3. JavaScript кэширование
4. Кэширование в JavaScript
5. HTMLCollection, NodeList и массив объектов
6. DOM: NodeList vs HTMLCollection
7. HTMLCollections & NodeLists

Помимо всего, рекомендуем почитать книгу Николаса Закаса, «JavaScript. Оптимизация производительности», в которой подробно описываются практики оптимизации не только DOM, но и хорошие подходы к языку в целом. Книга частично устаревшая, но полезных моментов всё же больше.