Junior Skills

DOM

Цель:

Формирование знаний и навыков работы с DOM-моделью

Задачи:

  • Определение DOM-модели страницы
  • Дочерние элементы страницы
  • Соседские и родительские элементы
  • Навигация по элементам
  • Поиск элементов

Материал:

Полезные ссылки:

learn.javascript (DOM-дерево) learn.javascript (Навигация по DOM-элементам) learn.javascript (Поиск: getElement*, querySelector*) doka.guide(DOM)

Критерии сдачи:

Задание 1. Дочерние элементы в DOM.

Образец страницы:

<html>
<body>
<div>Пользователи:</div>
<ul>
<li>Джон</li>
<li>Пит</li>
</ul>
</body>
</html>

Напишите код, как получить:

  1. Элемент <div>?
  2. <ul>?
  3. Второй <li> (с именем Пит)?

Задание 2. Перейдите по ссылке task и используя DevTools скопируйте код страницы к себе в VS Code.

Найдите следующие элементы страницы:

  1. Таблицу с id="age-table".
  2. Все элементы label внутри этой таблицы (их три).
  3. Первый td в этой таблице (со словом «Age»).
  4. Форму form с именем name="search".
  5. Первый input в этой форме.
  6. Последний input в этой форме.

Не зачёт:

  • Отсутствует одно или более решений задания
  • Выполненная работа не соответствует условию задания
  • Стили страницы подключены локально, а не в стороннем файле