Задачи для решения
Работа с классами
Дан элемент #elem. Добавьте ему класс www.
Дан элемент #elem. Удалите у него класс www.
Дан элемент #elem. Проверьте наличие у него класса www.
Дан элемент #elem. Добавьте ему класс www, если его нет и удалите - если есть.
Дан элемент #elem. Узнайте количество его классов.
Дан элемент #elem. Выведите последовательно алертом его классы.
Работа с CSS
Дан элемент #elem. Сделайте его красного цвета, размером 30px, добавьте ему границу. Решите задачу с помощью свойства cssText.
Свойство tagName
Дан элемент #elem. По клику на него выведите название его тега.
Дан элемент #elem. По клику на него выведите название его тега в нижнем регистре.
Даны элементы с классом www. Добавьте каждому элементу в конец название его тега в нижнем регистре.
Вставка элементов через appendChild
Дан ol. Вставьте ему в конец li с текстом 'пункт'.
Дан ul. Дан массив. Вставьте элементы этого массива в конец ul так, чтобы каждый элемент стоял в своем li.
Привязывание событий при вставке
Дан ul. Дан массив. Вставьте элементы этого массива в конец ul так, чтобы каждый элемент стоял в своем li. Сделайте так, чтобы к вставляемым li было привязано следующее событие: по нажатию на li она должна вывести на экран свой текст.
Вставка элементов через insertBefore
Дан элемент ul, а в нем li #elem. Вставьте перед элементом #elem новую li с текстом '!!!'.
Вставка элементов через insertAdjacentHTML
Дан элемент #elem. Вставьте перед ним span с текстом '!!!'.
Дан элемент #elem. Вставьте после него span с текстом '!!!'.
Дан элемент #elem. Вставьте ему в начало span с текстом '!!!'.
Дан элемент #elem. Вставьте ему в конец span с текстом '!!!'.
Потомки
Дан элемент #elem. Найдите первого потомка этого элемента и сделайте его текст красного цвета.
Дан элемент #elem. Найдите последнего потомка этого элемента и сделайте его текст красного цвета.
Дан элемент #elem. Найдите всех потомков этого элемента и добавьте им в конец текст '!'.
Соседи
Дан элемент #elem. Найдите его соседа сверху и добавьте ему в конец текст '!'.
Дан элемент #elem. Найдите его соседа снизу и добавьте ему в конец текст '!'.
Дан элемент #elem. Найдите его соседа снизу его соседа снизу (следующий элемент за соседним) и добавьте ему в конец текст '!'.
Родители
Дан элемент #elem. Найдите его родителя и покрасьте его в красный цвет.
Дан элемент #elem. Найдите родителя его родителя и покрасьте его в красный цвет.
Удаление и клонирование
Дан элемент #parent, внутри него дан элемент #child. Дана кнопка. По нажатию на эту кнопку удалите элемент #child.
Дан ol. По нажатию на кнопку получите его последнего потомка и удалите его.
Дан элемент. Сделайте так, чтобы по нажатию по нему этот элемент удалялся.
Дан ol, а внутри него li. Сделайте так, чтобы по нажатию на любую li эта li удалялась.
Клонирование
Дан инпут. Дана кнопка. По нажатию на кнопку клонируйте этот инпут.
Практика
Дан массив. Создайте ul через createElement, затем вставьте каждый элемент этого массива в отдельную li внутри этой ul, затем вставьте эту ul в конец body.
Дан инпут. Рядом с ним находится кнопочка "+". По нажатию на эту кнопку под нашим инпутом должен появится еще один пустой инпут.
Дан инпут. В него вводится число. По потери фокуса сделайте так, чтобы каждая цифра вставилась в новый инпут. Инпутов для цифр изначально не существует, они должны создаться в процессе работы скрипта.
Дана кнопка. Сделайте так, чтобы по нажатию на эту кнопку, скрывался родитель этой кнопки.