В этом занятии вы закрепите каждый метод из урока 10 на одном и том же файле index.html. На каждом экране: краткое напоминание теории, задание и форма для сдачи файла. Дополняйте код в теге <script> и после выполнения задания загружайте файл для проверки.
Порядок работы: создайте один HTML-файл с базовой разметкой и пустым <script>. Выполняйте задания по очереди, добавляя код в скрипт. После каждого задания нажимайте «Проверить» на соответствующем экране. Задание засчитывается при 100 баллах.
document.getElementById('id') находит на странице один элемент по уникальному id и возвращает его (или null, если не найден). Используется для кнопок, блоков вывода и других элементов с заданным id.
Задание
В вашем index.html в теге <script> используйте метод getElementById: найдите любой элемент по его id (например, кнопку или div) и в коде обратитесь к нему. Достаточно одного вызова getElementById(...) в скрипте.
document.querySelector('селектор') ищет первый элемент по CSS-селектору (класс, тег, вложенность). Возвращает один элемент или null. Примеры: querySelector('.btn'), querySelector('header nav').
Задание
В скрипте вашего index.html используйте метод querySelector с любым селектором (класс, тег или комбинация), чтобы получить один элемент со страницы.
document.querySelectorAll('селектор') возвращает коллекцию (NodeList) всех элементов, подходящих под селектор. У коллекции есть .length, перебор — циклом или forEach.
Задание
В скрипте используйте querySelectorAll, чтобы получить несколько элементов по одному селектору (например, все элементы с классом или все параграфы). Достаточно одного вызова querySelectorAll(...).
null или пустую коллекцию. Перед использованием проверяйте результат: if (el) { ... }, el?.classList.add(...). Также полезны element.tagName, getAttribute('href'), hasAttribute('href').
Задание
В скрипте добавьте проверку элемента перед использованием: условие if (el) (или !== null), либо использование tagName, getAttribute или hasAttribute, либо опциональная цепочка el?.....
element.classList.add('имя') — добавить класс, remove('имя') — убрать, toggle('имя') — переключить, contains('имя') — проверить наличие. Удобно для подсветки, скрытия блоков, смены темы.
Задание
В скрипте используйте classList: вызовите один из методов add, remove, toggle или contains у какого-либо элемента (например, по клику на кнопку добавлять или переключать класс у блока).
element.innerHTML = '<p>Текст</p>' заменяет всё содержимое элемента заданной HTML-строкой. Браузер разбирает строку и создаёт из неё узлы. Не подставляйте в innerHTML непроверенный ввод пользователя (риск XSS).
Задание
В скрипте присвойте свойство innerHTML какому-либо элементу (например, контейнеру с id), установив в него строку с HTML (хотя бы один тег или текст).
document.createElement('div') создаёт новый элемент; el.textContent = 'Текст' задаёт текст безопасно; parent.appendChild(el) добавляет узел в конец родителя. Так можно строить DOM без разбора HTML-строк.
Задание
В скрипте используйте оба метода: создайте элемент через createElement и добавьте его в контейнер на странице через appendChild (например, по клику добавлять новый параграф в div).
element.insertAdjacentHTML('где', '<li>пункт</li>') вставляет HTML в одно из мест: beforebegin, afterbegin, beforeend, afterend. Удобно добавлять разметку в нужную позицию, не заменяя всё содержимое.
Задание
В скрипте вызовите insertAdjacentHTML у какого-либо элемента, передав позицию (например, 'beforeend') и строку с HTML.
element.style.color = 'red', element.style.fontSize = '16px' — инлайн-стили (свойства в camelCase). Либо меняйте классы через classList или className, а стили задавайте в CSS.
Задание
В скрипте измените внешний вид элемента: через element.style.свойство (например, style.color, style.display) или через classList / className.
document.documentElement.style.setProperty('--имя-переменной', 'значение'). Все элементы, использующие var(--имя-переменной), обновятся. Удобно для тем и настроек.
Задание
В скрипте вызовите setProperty для установки CSS-переменной (например, переменной, имя которой начинается с --). Обычно это делают у document.documentElement или у корневого элемента.
Вы успешно выполнили все задания по методам работы с DOM. Это уже большое достижение: теперь вы можете создавать собственные сайты и добавлять в них динамику и логику для DOM-дерева.
В дальнейших занятиях мы будем углублять знания JavaScript: работать с логикой и вычислениями, обрабатывать поведение пользователя и взаимодействовать с API.