Урок 53(10)
DOM — це веб-технологія, що дозволяє керувати HTML-тегами сторінки через мову JavaScript.
Переваги використання DOM-структури:
DOM подає HTML-теги у вигляді об’єктів із властивостями і методами.
У кожного HTML-тега (об’єкта) на HTML-сторінці, завдяки DOM, є своя унікальна адреса.
Отримуючи доступ за цією адресою, JavaScript може керувати HTML-тегом.
Відкриваючи Html-сторінку, браузер створює на основі її тегів деревоподібну DOM-структуру, яка складається із множини зв'язаних вузлів.
Основні типи DOM-вузлів:
Document - Корінь дерева, представляє цілий документ, інакше кажучи —точка входу в DOM
Element - Представляє окремий елемент - HTML-тег, можна сказати, що це основні блоки. Атрибут (Attr) представляє параметр тега елемента.
Text - Представляє текстові дані, які містяться в елементі або атрибуті
веб-_технології_22.pptx
Робочий Аркуш уроку № 54
Зразок HTML-коду для аналізу дерева вузлів на сайті - http://software.hixie.ch/utilities/js/live-dom-viewer/ :
<!DOCTYPE html>
<html>
<head>
<title>Позиціювання</title>
</head>
<body>
<div style="position: absolute; top: 0; left: 70; width: 50; height: 100; z-index: 1">
<img src="fly.png">
</div>
<div style="position: absolute; top: 10; left: 15; width: 600; height: 100; overflow: scroll; z-index: 2">
<h1 style="color: yellow">Повій, вітре, до схід сонця, до схід сонця, край віконця.</h1>
</div>
<div style="position: absolute; top: 60; left: 400; width: 50; height: 100">
<h1 style="color: blue">Чайка<!--Н1--></h1>
</div>
</body></html>
