/Intro-to-DOM

Primary LanguageCSSMIT LicenseMIT

Работа с DOM

Задание 1

На странице task1.html дописать скрипт, который каждый раз при загрузке страницы переставляет абзацы вместе с их текстовым содержимым случайным образом. Для отслеживания момента окончания загрузки страницы скрипт должен работать внутри соответствующего обработчика события:

document.addEventListener("DOMContentLoaded", function() {
  // скрипт здесь
});

Задание 2

В папке task2 находится макет вымышленного сайта, состоящий из нескольких страниц. Необходимо написать скрипт, который при включении в каждую страницу предолженного сайта выполянет следующие шаги:

  1. Обходит все DOM-дерево в поисках тегов <div> и определяет на какой максимальной глубине вложенности находятся найденные теги. Например, для предложенного ниже примера кода максимальный уровень вложенности для тегов <div> равен 3.
<div>
  1 уровень
  <div>
    2 уровень
    <div>
      3 уровень
      <p>
        Это не &lt;div&gt;, поэтому не считается.
      </p>
    </div>
  </div>
  <div>
    2 уровень
  </div>
</div>
  1. Используя функцию для создания градиента (например, https://gist.github.com/paulmillr/6205257), создаёт массив цветов. Размерность массива равна максимальному уровню вложенности <div>. Начальный и конечный цвета задаются в коде.
  2. Обходит ещё раз всю страницу и для каждого элеммента <div> меняет стиль границы в соответствии с его уровнем вложенности. Для изменения цвета границы элемента можно использовать свойство border свойства style найденного элемента.
div.style.border = '3px solid red';

Источники

  1. Основная информация по работе с DOM — https://learn.javascript.ru/document
  2. Информация по отладке JavaScript кода в браузере Google Chrome — https://learn.javascript.ru/debugging-chrome