Перед решением задач изучите теорию к данному уроку.

Задачи для решения

Работа с классами

Для решения задач данного блока вам понадобятся следующие свойства: classList.

Дан элемент #elem. Добавьте ему класс www.

Дан элемент #elem. Удалите у него класс www.

Дан элемент #elem. Проверьте наличие у него класса www.

Дан элемент #elem. Добавьте ему класс www, если его нет и удалите - если есть.

Дан элемент #elem. Узнайте количество его классов.

Дан элемент #elem. Выведите последовательно алертом его классы.

Работа с CSS

Для решения задач данного блока вам понадобятся следующие свойства: cssText.

Дан элемент #elem. Сделайте его красного цвета, размером 30px, добавьте ему границу. Решите задачу с помощью свойства cssText.

Свойство tagName

Для решения задач данного блока вам понадобятся следующие свойства: tagName.

Дан элемент #elem. По клику на него выведите название его тега.

Дан элемент #elem. По клику на него выведите название его тега в нижнем регистре.

Даны элементы с классом www. Добавьте каждому элементу в конец название его тега в нижнем регистре.

Вставка элементов через appendChild

Для решения задач данного блока вам понадобятся следующие методы: createElement, appendChild.

Дан ol. Вставьте ему в конец li с текстом 'пункт'.

Дан ul. Дан массив. Вставьте элементы этого массива в конец ul так, чтобы каждый элемент стоял в своем li.

Привязывание событий при вставке

Дан ul. Дан массив. Вставьте элементы этого массива в конец ul так, чтобы каждый элемент стоял в своем li. Сделайте так, чтобы к вставляемым li было привязано следующее событие: по нажатию на li она должна вывести на экран свой текст.

Вставка элементов через insertBefore

Для решения задач данного блока вам понадобятся следующие методы: insertBefore.

Дан элемент ul, а в нем li #elem. Вставьте перед элементом #elem новую li с текстом '!!!'.

Вставка элементов через insertAdjacentHTML

Для решения задач данного блока вам понадобятся следующие методы: insertAdjacentHTML.

Дан элемент #elem. Вставьте перед ним span с текстом '!!!'.

Дан элемент #elem. Вставьте после него span с текстом '!!!'.

Дан элемент #elem. Вставьте ему в начало span с текстом '!!!'.

Дан элемент #elem. Вставьте ему в конец span с текстом '!!!'.

Потомки

Для решения задач данного блока вам понадобятся следующие свойства: firstElementChild, lastElementChild, children.

Дан элемент #elem. Найдите первого потомка этого элемента и сделайте его текст красного цвета.

Дан элемент #elem. Найдите последнего потомка этого элемента и сделайте его текст красного цвета.

Дан элемент #elem. Найдите всех потомков этого элемента и добавьте им в конец текст '!'.

Соседи

Для решения задач данного блока вам понадобятся следующие свойства: previousElementSibling, nextElementSibling.

Дан элемент #elem. Найдите его соседа сверху и добавьте ему в конец текст '!'.

Дан элемент #elem. Найдите его соседа снизу и добавьте ему в конец текст '!'.

Дан элемент #elem. Найдите его соседа снизу его соседа снизу (следующий элемент за соседним) и добавьте ему в конец текст '!'.

Родители

Для решения задач данного блока вам понадобятся следующие свойства: parentElement, parentNode.

Дан элемент #elem. Найдите его родителя и покрасьте его в красный цвет.

Дан элемент #elem. Найдите родителя его родителя и покрасьте его в красный цвет.

Удаление и клонирование

Для решения задач данного блока вам понадобятся следующие свойства: removeChild.

Дан элемент #parent, внутри него дан элемент #child. Дана кнопка. По нажатию на эту кнопку удалите элемент #child.

Дан ol. По нажатию на кнопку получите его последнего потомка и удалите его.

Дан элемент. Сделайте так, чтобы по нажатию по нему этот элемент удалялся.

Дан ol, а внутри него li. Сделайте так, чтобы по нажатию на любую li эта li удалялась.

Клонирование

Для решения задач данного блока вам понадобятся следующие свойства: cloneNode.

Дан инпут. Дана кнопка. По нажатию на кнопку клонируйте этот инпут.

Практика

Дан массив. Создайте ul через createElement, затем вставьте каждый элемент этого массива в отдельную li внутри этой ul, затем вставьте эту ul в конец body.

Дан инпут. Рядом с ним находится кнопочка "+". По нажатию на эту кнопку под нашим инпутом должен появится еще один пустой инпут.

Дан инпут. В него вводится число. По потери фокуса сделайте так, чтобы каждая цифра вставилась в новый инпут. Инпутов для цифр изначально не существует, они должны создаться в процессе работы скрипта.

Дана кнопка. Сделайте так, чтобы по нажатию на эту кнопку, скрывался родитель этой кнопки.