# Модификация DOM

Навигация по DOM

.next() - аналог .nextElementSibling в jQuery https://api.jquery.com/next/

.prev() - аналог .previousElementSibling в jQuery

.parent(); - аналог .parent в jQuery

.chidren(); - получает коллекцию детей от заданного элемента

.each() - применяет функцию к каждому элементу коллекции.

http://api.jquery.com/each/

$( "li" ).each(function( index,element) {
  console.log( index + ": " + $( this ).text() );
});

Добавление контента внутрь блока

.append() - добавляет элементы внутрь блока после контента

$('.container').append("<p>Some text</p>")

Следующий код переместит объекты h2 в container

$( ".container" ).append( $( "h2" ) );

.appendTo - отличается от .append тем, что добавляемый контент стоит в начале записи.

$( "<p>Test</p>" ).appendTo( ".inner" );

.html() - аналог .innerHTML для jQuery

.prepend() - добавляет содержимое внутрь блока перед контентом.

.prependTo()

Добавление ДО и ПОСЛЕ тегов

.before

$( ".inner" ).before( "<p>Test</p>" );

Добавит <p>Test</p> до .inner

.insertBefore
.after

Обертки

.wrap() - оборачивает каждый элемент из коллекции в блок обертку(n - элементов, n - оберток) http://api.jquery.com/wrap/

.wrapAll() - оборачивает сразу все блоки из коллекции в ОДНУ обертку для всех (n - элементов, одна обертка)

.wrapInner() - оборачивает контент внутри элементов.

Удаление

.detach - удаляет элементы из DOM, но возращает их в качестве результата
.empty - удаляет внутреннее содержимое
.remove - удаляет элементы безвозвратно
.unwrap - удаляет родителей у элементов https://api.jquery.com/unwrap/
.clone - если делать appendTo без клона, то он сделает перенос, если делать с, то будет копирование

Работа с атрибутами

.attr() - позволяет получать и устанавливать значение атрибута http://api.jquery.com/attr/

.data() - позволяет получать значение дата атрибутов.

$(obj).data('type');// считает значение из атрибута data-type

.val() - получает значение у input'ов

Модификация классов

.addClass() .hasClass() .removeClass() .toggleClass()

Практика:

1. Делаем, чтобы по клику на кнопку добавлялся красный, квадратный блок

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

3. Делаем массив фотографий. Делаем кнопку, при клике на которую на экран добавляется очередная фотография. Это происхоит до тех пор пока в массиве есть фотографии.

4. Добавляем кнопку, которая переносит все синие блоки в "корзину", то есть внутрь какого отдельного блока на экране

5. Делаем список с подпунктами. При клике на пункт, он разворачивается. Сделать возможность переноса подпунктов.

6. Игра "Заполни стакан". Есть блоки, есть стакан. При клике на блок, он перемещается в стакан. Цель заполнить стакан доверху. Если стакан переполнен - Вы проиграли.