Теоретичні відомості:
- https://comscienceatschool.blogspot.com/p/27_17.html
- Речич Н.В. Інформатика : вебтехнології (вибірковий модуль для 10-11 класів, рівень стандарту) / Н.В. Речич. - Харків: Вид-во «Ранок» , 2020
Відео-урок (@Galina84 Г. Лисенко): https://www.youtube.com/watch?v=bgDSyxDwrGM
Інтерактивні вправи:
https://learningapps.org/23684181
Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Об’єктна модель документа
Урок:
Об’єктна модель документа
12.02.2026
Вміст уроку:
1
2
3
1
Опрацюйте теоретичний матеріал:
Важливою ознакою інтерактивних HTML-сторінок є можливість реакції на дії користувача. Наприклад, натиск на кнопці повинен викликати появу діалогового вікна, або виконання перевірки правильності введених користувачем даних.
Об’єктна модель документа (англ. Document Object Model, DOM) — це програмний інтерфейс (API) для HTML.
DOM є стандартом, запропонованим вебконсорціумом W3C (World Wide Web Consortium — Консорціум Всесвітньої павутини), і регламентує спосіб подання вмісту документа (зокрема вебсторінки) у вигляді набору об’єктів.
DOM надає структуроване уявлення про документ та уможливлює доступ до цієї структури програмам, які можуть змінювати вміст, стиль і структуру документа. Подання DOM складається із структурованої групи вузлів і об’єктів, які мають властивості і методи. Власне, DOM з’єднує вебсторінку з мовами опису сценаріїв або мовами програмування.
Вебсторінка — це документ, який може бути поданий як у вікні браузера, так і в самому HTML-коді. У будь-якому випадку це один і той самий документ. DOM надає інший спосіб подання, зберігання й керування цього документа. Він повністю підтримує об’єктно орієнтоване уявлення вебсторінки, роблячи можливим її зміну за допомогою мови опису сценаріїв на кшталт JavaScript.
Усі властивості, методи і події, доступні для керування й створення нових сторінок, організовані у вигляді об’єктів. DOM подає HTML-теги у вигляді об’єктів із властивостями і методами. У кожного HTML-тега (об’єкта) на HTML-сторінці, завдяки DOM, є своя унікальна адреса. Отримуючи доступ за цією адресою, JavaScript може керувати HTML-тегом.
Відкриваючи HTML-сторінку, браузер створює на основі її тегів структуру DOM, де кожен HTML-тег постає у вигляді об’єкта зі своєю унікальною адресою. Після аналізу структурованого документа будується його подання у вигляді дерева:
Дерево в моделі DOM складається із множини зв’язних вузлів (Node) різних типів. Усе, що є в HTML, знаходиться і в DOM. Навіть директива <! DOCTYPE ...>, яку ми ставимо на початку HTML, теж є DOM-вузлом і знаходиться в дереві DOM безпосередньо перед <html>.
DOM не є мовою програмування, але без нього JavaScript не мав би жодної моделі або уявлення про вебсторінку, HTML-документ, його елементи. Спочатку JavaScript і DOM були тісно пов’язані, але згодом розвинулися в різні сутності. Вміст сторінки зберігається в DOM і може бути доступним і змінюватися з використанням JavaScript.
2
Перегляньте відео-урок
3
10 з 10 балів
Виконайте інтерактивні вправи.
Скріни виконих вправ прикріпіть до цього завдання (2 вправи=2 скріни)
.png)
Рефлексія від 1 учня
Сподобався:
0
Так: 0
Ні: 1
Зрозумілий:
0
Так: 0
Ні: 1
Потрібні роз'яснення:
0
Ні: 0
Так: 1