1 of 13

Об’єктна модель документа

За навчальною програмою 2018 року

Урок 20

10

(11)

2 of 13

Актуалізація опорних знань і життєвого досвіду

Розділ 4 § 20

Пропоную розповісти, що Ви уявляєте під словами «Об’єктна модель документа».

Ви можете пояснити, що це таке?

Для чого воно потрібно?

Де застосовується?

Які асоціації викликає?

10�(11)

3 of 13

Об’єктна модель документа

Розділ 4 § 20

Об’єктна модель документа (англ. Document Object Model, DOM) — специфікація прикладного програмного інтерфейсу для роботи зі структурованими документами

10�(11)

4 of 13

Об’єктна модель документа

Розділ 4 § 20

Розрізняють:

об’єктна модель браузера

(BOM)

об’єктна модель документа

(DOM)

унікальна для кожного браузера

є стандартом і має підтримуватися всіма браузерами

10�(11)

5 of 13

Об’єктна модель документа

Розділ 4 § 20

Вигляд DOM документа можна глянути у панелі розробника в браузері Google Chrome.

10�(11)

6 of 13

Об’єктна модель документа

Розділ 4 § 20

Інструменти розробника в браузері Google Chrome

10�(11)

7 of 13

Об’єктна модель документа

Розділ 4 § 20

DOM має деревоподібну ієархію. Документ DOM складається з вузлів Node. Кожен вузол може містити у собі вбудований вузол, елемент, текст чи коментар.

10�(11)

8 of 13

Об’єктна модель документа

Розділ 4 § 20

Структура DOM

<html>

<head>

<title>Заголовок веб-сторінки</title>

</head>

<body>

<p>Абзац 1</p>

<div>

<p>Абзац 2</p>

<р>Абзац З</р>

<div>

<b>Жирний текст</b>

<a href=“URL">JavaScript</a>

</div>

</div>

</body>

</html>

10�(11)

9 of 13

Об’єктна модель документа

Розділ 4 § 20

DOM один з найбільш використовуваних API в Web тому що він дозволяє коду, запущеному в браузері, отримувати доступ і взаємодіяти з кожним вузлом документа. Вузли можуть бути:

створені

переміщені

змінені

Слухачі подій можуть бути додані до вузлів і спрацьовувати під час виникнення даної події.

10�(11)

10 of 13

Запитання для рефлексії

Розділ 4 § 20

  1. Чи можна сказати, що я розумію поняття «об’єктна модель документа»?
  1. Що на уроці в мене виходило найкраще?
  1. Наскільки активно я працював на уроці?
  1. Чи маю я радість від того, що чомусь навчився?

10�(11)

11 of 13

Домашнє завдання

Розділ 4 § 20

Дослідити структуру DOM улюблених сайтів

10�(11)

12 of 13

Працюємо за комп’ютером

Розділ 4 § 20

10�(11)

13 of 13

Дякую за увагу!

За навчальною програмою 2018 року

Урок 20

10

(11)