Поняття об’єктної моделі документа. Веб-програмування та інтерактивні сторінки.

Переглянути відео.

Поняття об'єктної моделі

Каскадні стилі в HTML будують логічну структуру документа, а потім визначають формат її відображення. Цей підхід змінив усю технологію проектування сторінок сайту. Тепер можна визначити спочатку типи сторінок, потім логічні структури сторінок для кожного типу і, нарешті, для кожного логічного елемента, його склад і зовнішній вигляд.

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

Об'єктна модель документа (Document Object Model, DOM) — це засіб для роботи зі структурою документа, а також з елементами сторінки в кодах HTML та у сценаріях

Об'єктна модель документа — специфікація прикладного програмного інтерфейсу для роботи зі структурованими документами (як правило, документами XML). Визначається ця специфікація консорціумом W3C.

З точки зору об'єктно-орієнтованого програмування, DOM визначає класи, методи та атрибути цих методів для аналізу структури документів та роботи із представленям документів у вигляді дерева.

DOM це зовсім інше представлення веб-сторінки ніж HTML код.

Браузер по вказаній URL адресій відправляє запит і отримує (завантажує) з сервера веб-сторінку у вигляді HTML коду, який часто називається вихідний код сторінки. І якщо у коді вказані інші файли такі як стилі css, js - то завантажує і їх.

І уже з завантаженого з сервера HTML коду браузер формує документ - DOM.

Браузер створює DOM для того щоб відобразити веб-сторіну на екрані.

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

Відкрити цей інструмент можна натиснувши F12 або із контекстного меню будь-якої веб-сторінки - пункт Перевірити (Ctrl+Shift+I) .

DOM схожий на вихідний код HTML але не є ним, а лише формується з нього.

Браузер автоматично виправляє помилки якщо вони є у HTML коді. Тобто закриває не закриті теги HTML, вставляє обов'язкові теги якщо вони опущені.

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

Кожен вузол DOM формується з HTML тегу і отримує властивості, події, стилі, які вказані у самих атрибутах тегу, CSS стилях і в JavaScript коді.

DOM підтримує об'єктно орієнтоване представлення веб-сторінки і дозволяє змінювати документ веб-сторінки за допомогою JavaScript.

Сценарії

Щоб веб-сторінка була інтерактивною, тобто могла взаємодіяти з користувачем, і динамічною, необхідно використовувати скрипти, або сценарії.

Сценарій (script, скрипт) — це програма, написана спеціальною мовою програмування і вбудована в HTML-документ.

Сценарії описують усі можливі дії над елементами HTML-документа під час взаємодії з користувачем: реакцію на натискання кнопки миші, зміну вмісту сторінки залежно від певних дій користувача тощо.

Для роботи з DOM у JavaScript є об'єкт document, який дозволяє:

• видаляти HTML-елементи і атрибути;

• змінити всі HTML-елементи на сторінці;

• змінити всі атрибути HTML на сторінці;

• змінювати всі стилі CSS на сторінці;

• додавати нові елементи HTML і атрибути;

• створювати нові події на сторінці;

• редагувати існуючі події на сторінці.

Методи і властивості для роботи з DOM

JavaScript дозволяє на етапі форматування документу додавати до нього дані за допомогою методів document.write() і document.writeln().

Метод в об'єктно-орієнтованому програмуванні — підпрограма (процедура, функція), що використовується виключно разом із класом (методи класу) або з об'єктом (методи екземпляра).

Методи для отримання елементу (ів) з документу:

• document.getElementById() - повертає елемент за вказаним id.

• document.getElementsByName() - повертає список елементів з вказаним name.

• document.getElementsByTagName - повертає список елементів за вказаною назвою тегу.

• document.getElementsByClassName() - повертає список елементів за вказаним ім'ям класу.

• document.querySelector() - повертає перший елемент в документ,і який співпадає з вказаним CSS селектором.

• document.querySelectorAll() - повертає список всіх елементів в документі, які відповідають зазначеним CSS селекторам.

Властивості для переходу по дереву DOM:

• document.documentElement - повертає елемент який є батьком документу.

• Element.parentElement - батьківський елемент поточного елемента.

• Element.children - список дочірних елементів.

• Element.firstElementChild - перший дочірний елемент.

• Element.lastElementChild - останій дочірний елемент.

• Element.nextElementSibling - наступний елемент у батьківському списку.

• Element.previousElementSibling - попередній елемент у батьківському списку.

Програмний код JavaScript можна помістити в документ HTML у три способи:

• окремі скрипти розмістити в тілі документа, там, де в їхньому використанні є потреба за допомогою тега <SCRIPT></SCRIPT>;

<!DOCTYPE HTML>

<html>

<head><title>Вікно привітання</title></head>

<body>

<p>Перед скриптом...</p>

<script>

alert( 'Привіт!' );

</script>

<p>...Післе скрипта.</p>

</body>

</html>

• скрипти (функції, оголошення об'єктів) розмістити у заголовку документа між тегами HEAD>...</HEAD>, а використовувати їх у тілі документа;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> <title>Виклик функції</title>

<script>

function popup() {

document.getElementById('welcome').innerHTML = 'Вітаю!'; }

</script>

</head>

<body onload="popup()">

<div id="welcome"></div>

</body>

</html>

• зберегти скрипт у файлі (із розширенням .js), а в документі дати посилання на нього.

Вміст файлу new.html

<!DOCTYPE html>

<html>

<head>

<title>Зовнішній скрипт</title>

<script src="new.js"></script>

</head>

<body>

<p>Вміст сторінки</p>

</body>

</html>

Вміст файлу new.js

alert('Підтвердіть дію!');

Дати письмові відповіді у цьому блоці на наступні питання

1. Що таке об’єктна модель документа?

2. Для чого використовується об’єктна модель документа?

3. Які переваги використання об’єктної моделі документа?

4. Які недоліки об’єктної моделі документа?

5. Як можна використовувати об’єктну модель документа у реальному житті?

Виконати тестування та додати скрін

https://naurok.com.ua/test/join?gamecode=3396649

Завдання

Створити просту веб-сторінку зі сценарієм. Він виводитиме на екран вікно з повідомленням «Увага!!!». Для цього використати метод alert( ) .