# Неделя #3 Работа с DOM. DOM Events

# Подготовка к выполнению задания

Изучить все материалы третьей недели курса в Личном кабинете.

# Что нужно сделать?

# Выполнить домашнее задание #4 (Работа с DOM)

Скачайте архив с домашним заданием №4
Разархивируйте архив и скопируйте папку с ДЗ в сборку
Приступаем к выполнению ДЗ №4
Задание 4.1:

4.1.1: Функция должна создать элемент с тегом <div>

4.1.2: В созданный элемент необходимо поместить текст, переданный в параметр text

Пример:

createDivWithText('loftschool') // создаст элемент div, поместит в него 'loftschool' и вернет созданный элемент

Задание 4.2: Функция должна вставлять элемент, переданный в параметре what в начало элемента, переданного в параметре where

Пример:

prepend(document.querySelector('#one'), document.querySelector('#two')) // добавит элемент переданный первым аргументом в начало элемента переданного вторым аргументом

Задание 4.3:

4.3.1: Функция должна перебрать все дочерние элементы узла, переданного в параметре where

4.3.2: Функция должна вернуть массив, состоящий из тех дочерних элементов, следующим соседом которых является элемент с тегом <p>

Пример:

   Представим, что есть разметка:
   <body>
      <div></div>
      <p></p>
      <a></a>
      <span></span>
      <p></p>
   </dody>

   findAllPSiblings(document.body) // функция должна вернуть массив с элементами div и span т.к. следующим соседом этих элементов является элемент с тегом `<p>`

Задание 4.4:

Функция представленная ниже, перебирает все дочерние узлы типа "элемент" внутри узла переданного в параметре where и возвращает массив из текстового содержимого найденных элементов. Но похоже, что в код функции закралась ошибка и она работает не так, как описано.

Необходимо найти и исправить ошибку в коде так, чтобы функция работала так, как описано выше.

Пример:

   Представим, что есть разметка:
   <body>
      <div>привет</div>
      <div>loftschool</div>
   </dody>

   findError(document.body) // функция должна вернуть массив с элементами 'привет' и 'loftschool'

Задание 4.5:

Функция должна перебрать все дочерние узлы элемента переданного в параметре where и удалить из него все текстовые узлы.

Задачу необходимо решить без использования рекурсии, то есть можно не уходить вглубь дерева. Так же будьте внимательны при удалении узлов, т.к. можно получить неожиданное поведение при переборе узлов

Пример:

   После выполнения функции, дерево <div></div>привет<p></p>loftchool!!!
   должно быть преобразовано в <div></div><p></p>

Задание 4.6:

Выполнить предудыщее задание с использование рекурсии - то есть необходимо заходить внутрь каждого дочернего элемента (углубляться в дерево)

Будьте внимательны при удалении узлов, т.к. можно получить неожиданное поведение при переборе узлов

Пример:

   После выполнения функции, дерево <span> <div> <b>привет</b> </div> <p>loftchool</p> !!!</span>
   должно быть преобразовано в <span><div><b></b></div><p></p></span>

Задание 4.7:*

Необходимо собрать статистику по всем узлам внутри элемента переданного в параметре root и вернуть ее в виде объекта.

Статистика должна содержать:

количество текстовых узлов
количество элементов каждого класса
количество элементов каждого тега

Для работы с классами рекомендуется использовать classList. Постарайтесь не создавать глобальных переменных

Пример:

   Для дерева <div class="some-class-1"><b>привет!</b> <b class="some-class-1 some-class-2">loftschool</b></div>
   должен быть возвращен такой объект:
   {
     tags: { DIV: 1, B: 2},
     classes: { "some-class-1": 2, "some-class-2": 1 },
     texts: 3
   }

Задание 4.8:*

4.8.1: Функция должна отслеживать добавление и удаление элементов внутри элемента переданного в параметре where. Как только в where добавляются или удаляются элементы, необходимо сообщать об этом при помощи вызова функции переданной в параметре fn

4.8.2: При вызове fn необходимо передавать ей в качестве аргумента объект с двумя свойствами:

type: типа события (insert или remove)
nodes: массив из удаленных или добавленных элементов (в зависимости от события)

4.8.3: Отслеживание должно работать вне зависимости от глубины создаваемых/удаляемых элементов

Рекомендуется использовать MutationObserver

Пример:

   Если в where или в одного из его детей добавляется элемент div
   то fn должна быть вызвана с аргументом:
   {
     type: 'insert',
     nodes: [div]
   }
   ------
   Если из where или из одного из его детей удаляется элемент div
   то fn должна быть вызвана с аргументом:
   {
     type: 'remove',
     nodes: [div]
   }

Запустить тесты и убедиться, что они прошли
Сделайте коммит и пуш изменений
Создайте пулл реквест и отправьте его на проверку наставнику

# Выполнить домашнее задание #5 (DOM Events)

Скачайте архив с домашним заданием №5
Разархивируйте архив и скопируйте папку с ДЗ в сборку
Приступаем к выполнению ДЗ №5

Задание 5.1:

Функция должна возвращать Promise, который должен быть разрешен через указанное количество секунд

** Пример:**

   delayPromise(3) // вернет promise, который будет разрешен через 3 секунды

Задание 5.2:

5.2.1: Функция должна вернуть Promise, который должен быть разрешен с массивом городов в качестве значения

Массив городов можно получить отправив асинхронный запрос по адресу

5.2.2: Элементы полученного массива должны быть отсортированы по имени города

Пример:

   loadAndSortTowns().then(towns => console.log(towns)) // должна вывести в консоль отсортированный массив городов

Запустить тесты и убедиться, что они прошли
Сделайте коммит и пуш изменений
Создайте пулл реквест и отправьте его на проверку наставнику

Дедлайн: понедельник следующей недели, в 12.00

# Как всё успеть?

Данный план является примерным ориентиром. Вы всегда можете работать в удобном для себя темпе.

# 🗓 Понедельник

Изучаем материалы по теме "DOM"

Выполняем домашнее задание 4

# 🗓 Вторник

Продолжаем изучать материалы по теме "DOM"

Сдаём домашнее задание 4 на проверку.

Вносим правки в домашнее задание №4 после проверки его наставником.

# 🗓 Среда

Изучаем материалы по теме "Асинхронность"

Изучаем материалы из прикрепленных ссылок

Выполняем домашнее задание 5

# 🗓 Четверг

Сдаём домашнее задание 5 на проверку.

Подготовьте вопросы и запишитесь на консультацию к наставнику.

# 🗓 Пятница

Смотрим воркшоп с разбором заданий по третьей неделе.

# 🗓 Суббота - Воскресенье

Вносим правки в задание после проверки наставником.