Практическая работа №8

Работа с DOM (Document Object Model)

Цель работы:

• Понять, что DOM — это программный интерфейс для HTML-документов, представляющий их в виде древовидной структуры.
• Освоить основные методы поиска элементов на странице.
• Научиться программно создавать новые элементы и вставлять их в документ.
• Отработать управление классами и стилями элементов.

---

Основные теоретические положения

Что такое DOM?

Document Object Model (DOM) — это независимый от платформы и языка программный интерфейс, который позволяет программам и скриптам динамически обращаться к содержимому, структуре и стилям документа. Браузер преобразует HTML-код в дерево объектов, где каждый тег, атрибут и текст становится узлом (Node).

Основные методы поиска элементов

Метод	Описание	Пример
document.getElementById()	Находит элемент по его уникальному id.	document.getElementById('root')
document.querySelector()	Находит первый элемент, соответствующий CSS-селектору.	document.querySelector('.card')
document.querySelectorAll()	Находит все элементы, соответствующие CSS-селектору, возвращает NodeList.	document.querySelectorAll('li.active')
document.getElementsByClassName()	Находит все элементы по имени класса, возвращает “живую” HTMLCollection.	document.getElementsByClassName('user')

Создание и вставка элементов

1. Создание: document.createElement(tagName) создает новый элемент с указанным именем тега.
2. Вставка:
   • parentNode.appendChild(childNode): Вставляет узел childNode в конец parentNode.
   • parentNode.insertBefore(newNode, referenceNode): Вставляет newNode перед referenceNode.
   • element.insertAdjacentHTML(position, text): Вставляет HTML-строку в указанную позицию относительно элемента.

Управление классами и стилями

• Классы: Свойство element.classList предоставляет удобные методы для работы с классами:
  • element.classList.add('class-name')
  • element.classList.remove('class-name')
  • element.classList.toggle('class-name')
• Стили: Свойство element.style позволяет устанавливать инлайн-стили:
  • element.style.color = 'red'
  • element.style.backgroundColor = 'yellow'

---

Основные требования к практической работе

1. Создать HTML-файл (index.html) с минимальной разметкой и пустым контейнером (<div id="root">).
2. Весь код, генерирующий DOM-структуру, должен быть написан в отдельном файле script.js.
3. Использовать только методы чистого JavaScript (без библиотек).
4. Обязательно использовать методы: document.createElement(), element.appendChild(), element.classList.add(), element.style.property или element.textContent.

---

Задания для выполнения

Выбор варианта: Номер варианта соответствует порядковому номеру студента в списке группы. Если количество студентов превышает 10, варианты повторяются по кругу (например, 11-й студент выполняет Вариант 1, 12-й - Вариант 2 и т.д.).

Вариант 1: Список пользователей

Данные: Массив объектов users (имя, возраст, статус: active/inactive).

Задача:

1. Создать неупорядоченный список (<ul>).
2. Для каждого пользователя создать элемент списка (<li>).
3. Внутри <li> отобразить имя и возраст.
4. Если статус пользователя inactive, добавить элементу <li> класс user-inactive и установить красный цвет текста через свойство style.

Вариант 2: Каталог книг

Данные: Массив объектов books (название, автор, год издания).

Задача:

1. Создать контейнер (<div>) с классом book-catalog.
2. Для каждой книги создать карточку (<div class="book-card">).
3. Внутри карточки создать заголовок (<h3>) для названия и параграф (<p>) для автора и года.
4. Используя insertAdjacentHTML, добавить в начало контейнера заголовок <h2>Каталог книг</h2>.

Вариант 3: Таблица продуктов

Данные: Массив объектов products (название, цена, количество на складе).

Задача:

1. Создать HTML-таблицу (<table>) с заголовком (<thead>) и телом (<tbody>).
2. Заголовок должен содержать колонки: “Название”, “Цена”, “Количество”.
3. Для каждого продукта создать строку (<tr>) в теле таблицы.
4. Если количество на складе меньше 5, добавить строке класс low-stock.

Вариант 4: Список задач (To-Do List)

Данные: Массив объектов tasks (текст задачи, статус: completed/pending).

Задача:

1. Создать упорядоченный список (<ol>).
2. Для каждой задачи создать элемент списка (<li>).
3. Текст задачи должен быть обернут в элемент <span>.
4. Если статус completed, найти этот <span> и добавить ему стиль text-decoration: line-through.

Вариант 5: Меню навигации

Данные: Массив объектов menuItems (текст, ссылка href).

Задача:

1. Создать элемент навигации (<nav>).
2. Внутри создать неупорядоченный список (<ul>).
3. Для каждого элемента создать <li> с вложенным тегом <a>.
4. Установить атрибуты href для ссылок.
5. Добавить первому элементу списка класс active-link.

Вариант 6: Галерея изображений

Данные: Массив объектов images (URL изображения, подпись).

Задача:

1. Создать контейнер (<div id="gallery">).
2. Для каждого объекта создать элемент figure.
3. Внутри figure создать тег <img> (установить src) и figcaption (для подписи).
4. Установить всем изображениям одинаковую ширину через свойство style (например, width: 200px).

Вариант 7: Список комментариев

Данные: Массив объектов comments (автор, текст комментария, дата).

Задача:

1. Создать контейнер (<section id="comments-section">).
2. Для каждого комментария создать блок (<article class="comment">).
3. Внутри блока создать параграф для автора (жирным шрифтом) и параграф для текста комментария.
4. Использовать метод createTextNode для вставки текста комментария.

Вариант 8: Список валют

Данные: Массив объектов currencies (код валюты, название, курс к USD).

Задача:

1. Создать список определений (<dl>).
2. Для каждой валюты создать термин (<dt>) для кода валюты и определение (<dd>) для названия и курса.
3. Используя textContent, вставить курс с округлением до двух знаков после запятой.

Вариант 9: Рейтинг фильмов

Данные: Массив объектов movies (название, жанр, рейтинг от 1 до 10).

Задача:

1. Создать упорядоченный список (<ol>).
2. Для каждого фильма создать элемент списка (<li>).
3. Внутри <li> отобразить название и рейтинг.
4. Используя setAttribute, добавить элементу <li> атрибут data-rating со значением рейтинга.

Вариант 10: Профиль сотрудника

Данные: Массив объектов employees (имя, должность, отдел).

Задача:

1. Создать контейнер (<div id="employees-list">).
2. Для каждого сотрудника создать блок (<div class="employee-profile">).
3. Внутри блока создать параграф для имени, должности и отдела.
4. Используя метод cloneNode(true), создать и вставить в конец контейнера дополнительный блок-разделитель (<hr>) после каждого профиля.

---

Контрольные вопросы

1. Что такое Document Object Model (DOM) и какова его структура?
2. В чем разница между document.getElementById() и document.querySelector()?
3. Как создать новый HTML-элемент с помощью JavaScript?
4. Объясните разницу между element.appendChild() и element.insertAdjacentHTML().
5. Как добавить, удалить и переключить CSS-класс элемента, используя свойство classList?
6. В каких случаях предпочтительнее использовать element.textContent, а в каких — element.innerHTML?

---

Рекомендуемая литература

1. Введение в DOM (learn.javascript.ru)
2. Поиск: getElement*, querySelector* (learn.javascript.ru)
3. Изменение документа (learn.javascript.ru)
4. Свойства и методы для работы с классами и стилями (MDN)
5. Вставка элементов: append, prepend, before, after (learn.javascript.ru)