Об'єктна модель документа (DOM) є програмним інтерфейсом для HTML. DOM найчастіше використовується JavaScript, але не є його частиною, тому іноді з DOM працюють в інших мовах.
Документ може бути представлений як у вікні браузера, так і в HTML-коді. У будь-якому випадку, це той самий документ. DOM надає інший спосіб подання, зберігання та керування цього документа. DOM повністю підтримує об'єктно-орієнтоване представлення веб-сторінки, уможливлюючи її зміну за допомогою мови опису сценаріїв на кшталт JavaScript.
Браузер, коли запитує сторінку і отримує відповідь від сервера її вихідний HTML-код повинен спочатку його розібрати. У процесі аналізу та розбору HTML-коду браузер будує на основі нього DOM-дерево.
Після виконання цієї дії та низки інших браузер приступає до відтворення сторінки. У цьому процесі він, звичайно, вже використовує створене ним DOM-дерево, а не вихідний HTML-код.
Отримавши DOM-вузол, ми можемо перейти до його найближчих сусідів, використовуючи навігаційні посилання.
Є два основні набори посилань:
Деякі види DOM-елементів, наприклад таблиці, надають додаткові посилання та колекції для доступу до вмісту.
Вузли DOM містять багато посилань на сусідні. Показано властивості вузлів, за допомогою яких можна обійти дерево.
Найвищі елементи дерева доступні як властивості об'єкту document
<html>=document.documentElement
Найвищий вузол документа: document.documentElement . У DOM він відповідає тегу . <body> = document.body
Інший часто використовуваний DOM-вузол – вузол тега<body> : document.body .
<head>=document.head
Тег <head> доступний як document.head
Є одна тонкість: document.body може дорівнювати null. Не можна отримати доступ до елемента, якого ще не існує під час виконання скрипту.
Якщо скрипт знаходиться в <head>, document.body в ньому недоступний, тому що браузер його ще не прочитав.
Теоретично можна пройти в будь-яку частину дерева, використовуючи тільки ці посилання. Але JavaScript надає багато додаткових допоміжних посилань. Властивості firstChild і lastChild показують перший і останній дочірній елементи, або містять null у тих вузлів, які не мають дочірніх. previousSibling і nextSibling вказують на сусідні вузли - вузли того ж батька, що і поточного вузла, але перебувають у списку одразу до або після поточної. У першого вузла властивість попередньогосиблінгу буде null, а у останнього nextsibling буде null.
Наступний невеликий приклад – це JavaScript. Тобто приклад написано на JavaScript, але при цьому використовується DOM для доступу до документа та його елементів. DOM не є мовою програмування, але без нього JavaScript не мав би жодної моделі або уявлення про веб-сторінку, HTML-документ та його елементи. Кожен елемент у документі - весь документ в цілому, заголовок, таблиці всередині документа, заголовки таблиці, текст усередині осередків таблиці - це частини об'єктної документної моделі для цього документа, тому всі вони можуть бути доступні і можуть змінюватися за допомогою DOM та скриптової мови на кшталт JavaScript
Визначено код JavaScript, цей код встановлює функцію під час завантаження документа (коли весь DOM доступний для використання). Ця функція створює новий елемент H1 методом document.createElement(name), додає текст у цей елемент методом document.createTextNode("Hello, World !");, а потім додає H1 у дерево документа методом parentNode.appendChild(node),де властивість parentNode вказує на батька:
Як ми вже бачили, childNodes схожий на масив. Насправді це не масив, а колекція - особливий об'єкт-псевдомасив, що перебирається.
І є два важливі наслідки з цього:
Для перебору колекції ми можемо використовувати for..of:
for (let node of document.body.childNodes) {
alert(node); // покаже всі вузли з колекції
}
Це працює, тому що колекція є об'єктом, що перебирається (є необхідний для цього метод Symbol.iterator ).
Методи масивів не працюватимуть, тому що колекція – це не масив:
alert(document.body.childNodes.filter); // undefined (у колекції немає методу filter
Перший пункт – це добре для нас. Другий – буває незручний, але можна пережити. Якщо нам хочеться використовувати саме методи масиву, ми можемо створити справжній масив з колекції, використовуючи Array.from :
alert( Array.from(document.body.childNodes).filter ); // зробили
Майже всі колекції DOM, за невеликим винятком, живі. Інакше кажучи, вони відбивають поточний стан DOM. Якщо ми збережемо посилання на elem.childNodes і додамо/видалити вузли в DOM, то вони з'являться автоматично в збереженій колекції.
Колекції перебираються циклом for..of. Деякі розробники-початківці намагаються використовувати для цього цикл for..in.
Не робіть так. Цикл for..in перебирає всі властивості, що перераховуються. А колекції мають деякі «зайві», рідко використовувані властивості, які зазвичай нам не потрібні:
Навігаційні властивості, описані вище, відносяться до всіх вузлів у документі. Зокрема, в childnodes знаходяться і текстові вузли і вузлиелементи і вузли-коментарі, якщо вони є.
Але для більшості завдань текстові вузли та вузли-коментарі нам не потрібні.
хочемо маніпулювати вузлами-елементами, які є теги і формують структуру сторінки.
Тому давайте розглянемо додатковий набір посилань, які враховують лише вузли-елементи:
Досі ми описували основні навігаційні посилання.
Деякі типи DOM-елементів надають для зручності додаткові властивості, специфічні для їх типу.
– чудовий приклад таких елементів.
Елемент <table> , на додаток до властивостей, про які йшлося вище, підтримує такі:
table.rows – колекція рядків <tr> таблиці.
table.caption/tHead/tFoot – посилання на елементи таблиці <caption> , <thead>, <tfoot> .
table.tBodies – колекція елементів таблиці <tbody>(за специфікацією їх може бути більше одного).
<thead> , <foot> , <tbody> надають властивість rows : tbody.rows – колекція рядків <tr> <tr> : tr.cells – колекція <td> та <th> осередків, що знаходяться всередині рядка <tr> .
tr.sectionRowIndex – номер рядка <tr> у поточній секції / tr.rowIndex – номер рядка <tr> у таблиці (включаючи всі рядки таблиці).
<td> and <th> : td.cellIndex – номер комірки у рядку <tr> .
Знайдемо сусідів усіх елементів списку
Навігація по DOM. Приклади.
САМОСТІЙНА РОБОТА НА НАВІГАЦІЮ ПО ДЕРЕВУ DOM.
