1 of 23

Об'єктна модель документа (DOM)

2 of 23

  • Об’єктна модель документа (англ. Document Object Model, DOM) — це програмний�інтерфейс (API) для HTML.
  • DOM є стандартом, запропонованим веб-консорціумом W3C (World Wide Web Consortium — консорціум Всесвітньої павутини), і регламентує спосіб подання вмісту документа (зокрема веб-сторінки) у вигляді набору об’єктів. ��

3 of 23

  • DOM надає структуроване уявлення про документ та уможливлює доступ до цієї структури програмам, які можуть змінювати вміст, стиль і структуру документа.
  • Подання DOM складається із структурованої групи вузлів і об’єктів, які мають властивості і методи.
  • DOM з’єднує веб-сторінку з мовами опису сценаріїв або мовами програмування.

4 of 23

  • Відкриваючи HTML-сторінку, браузер створює на основі її тегів структуру DOM, де кожен HTML-тег постає у вигляді об’єкта зі своєю�унікальною адресою.
  • Після аналізу cтруктурованого документа будується його подання у вигляді дерева �

5 of 23

Структура DOM, побудована браузером

Дерево вузлів DOM

6 of 23

Приклади DOM

7 of 23

  • Веб-сторінка — це документ, який може бути поданий як у вікні браузера, так і в самому HTML-коді.
  • DOM надає інший спосіб подання, зберігання й керування цього документа.
  • Він повністю підтримує об’єктно орієнтоване представлення веб-сторінки, роблячи можливим її зміну за допомогою мови опису сценаріїв, наприклад JavaScript �

8 of 23

Навіщо це потрібно?

  • DOM подає HTML-теги у вигляді об’єктів із властивостями і методами.
  • У кожного HTML-тега (об’єкта) на HTML-сторінці, завдяки DOM, є своя унікальна адреса.
  • Отримуючи доступ за цією адресою, JavaScript може керувати HTML-тегом. �

9 of 23

Цікаво

  • DOM — стандарт, що розвивається і поділяється на три рівні.
  • Перший рівень є першою версією стандарту і поки що єдиною закінченою.�
  • Він складається з двох розділів: перший є ядром і визначає принципи маніпуляції зі структурою�документа (генерація і навігація), а другий присвячений поданням у DOM елементів HTML, що визначаються однойменними тегами.�
  • Другий і третій рівні описують модель подій, доповнюють таблиці стилів, проходи по структурі. �

10 of 23

Цікаво

  • DOM не є мовою програмування, але без нього JavaScript не мав би жодної моделі або уявлення про веб-сторінку, HTML-документ, його елементи.
  • Спочатку JavaScript і DOM були тісно�пов’язані, але згодом розвинулися в різні сутності.
  • Вміст сторінки зберігається в DOM і може бути доступним і змінюватися з використанням JavaScript. �

11 of 23

Вузол

Опис

Документ�(Document)

Корінь дерева, представляє цілий документ, інакше кажучи — точка входу в DOM

Фрагмент документа�(DocumentFragment)

Вузол, який є коренем піддерева основного документа

Елемент (Element)

Представляє окремий елемент HTML, можна сказати, що це основні будівельні�блоки. Атрибут (Attr) представляє атрибут елемента

Текст (Text)

Представляє текстові дані, які містяться в елементі або атрибуті

Коментарі

Іноді можна включити інформацію, яка не буде показана, проте є доступною з JS

12 of 23

  • DOM — це веб-технологія, що дозволяє керувати HTML-тегами сторінки через мову JavaScript.

13 of 23

Створення DOM-елементів

�• document.create Element (tag); — створює новий тег.�

  • document.create TextNode (text); — створює текстовий вузол.�

14 of 23

Додавання DOM-елемента:

�• parentElem.appendChild (elem); — додає елемент у кінець дочірніх елементів;�

• parentElem.insertBefore (elem, nextSibling); — вказує, перед яким із дочірніх елементів додати новий вузол.�

15 of 23

Видалення DOM-елементів:

• parentElem.removeChild (elem) — видаляє конкретний елемент зі списку дітей батьківського елемента;�• parentElem.replaceChild(newElem, elem) — видаляє вказаний�елемент і заміняє його новим �

16 of 23

Підведемо підсумки

17 of 23

Що таке DOM простими словами

  • Правила за якими формується будь яка веб сторінка в інтернеті.
  • Веб сторінка – це об’єкт. Відповідно в цього об’єкту є властивості (який це об’єкт) і методи (що об’єкт може робити).
  • Кожен з елементів називається вузлом

​

​

​

​

18 of 23

Навіщо нам потрібен DOM

  • Гнучкий пошук потрібного елементу, змінювати, доповнювати, додавати та видаляти елементи до або після цього вузла.
  • Значно простіше працювати з ієрархічною структурою, це пришвидшує роботу, та підвищує продуктивність, дозволяє економити ресурси комп’ютера, оскільки він працює з конкретним вузлом а не обробляє всі інші гілки.

​

19 of 23

Цікаво

  • Якщо браузер стикається з некоректно написаним HTML-кодом, він автоматично коригує його при побудові DOM.

​

  • Наприклад, на початку документа завжди повинен бути тег <html>. Навіть якщо його немає в документі - він буде в дереві DOM, браузер його створить. Те ж саме стосується і тега <body>.

20 of 23

  • Все, що є в HTML, навіть коментарі, є частиною DOM.

​

  • Директива <!DOCTYPE ...>, яку ми ставимо на початку HTML, є DOM-вузлом. Вона знаходиться в дереві DOM безпосередньо перед <html>. Зазвичай ми не розглядаємо цей вузол, але він існує.

​

  • Навіть об'єкт document, що представляє весь документ, формально є DOM-вузлом.

21 of 23

Завдання для самостійного виконання

  1. Зайдіть на сайт  Live DOM Viewer http://software.hixie.ch/utilities/js/live-dom-viewer/
  2. Додайте меню у вигляді списку з трьох елементів з посиланнями на інші сторінки.
  3. Проаналізуйте як змінилося дерево вузлів DOM
  4. Додайте текст.
  5. Зробіть скріншот

​

​

22 of 23

Завдання для самостійного виконання

Дослідіть DOM використовуючи інструменти розробника браузера.

Для цього відкрийте сторінку index.html попередньої домашньої роботи, натисніть «Інструменти розробника» і перейдіть на вкладку «Elements».

При натисканні на елемент на дереві вузлів ви отримуєте детальну інформацію у лівому вікні.

​

23 of 23

Аналізуємо. Обговорюємо

  1. Що таке об’єктна модель документа?
  2. Яка організація і чому запропонувала стандарт DOM?
  3. Як можна представити веб-сторінку?
  4. У чому перевага використання DOM?
  5. Назвіть типи вузлів.
  6. Як саме можна працювати з веб- документом завдяки DOM?��