HTML DOM (ОБ'ЄКТНА МОДЕЛЬ ДОКУМЕНТА)

HTML DOM (об'єктна модель документа) це ієрархічне представлення документів HTML. Він визначає структуру та властивості елементів на веб-сторінці, дозволяючи JavaScript динамічно отримувати доступ, маніпулювати й оновлювати вміст, підвищуючи інтерактивність і функціональність.

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

Зміст

Для чого потрібен DOM?
Структура DOM
Властивості DOM
Методи об'єктної моделі документа
Чим DOM не є?
Рівні DOM:

Що таке DOM?

DOM , або Об'єктна модель документа , це інтерфейс програмування, який представляє структуровані документи, такі як HTML і XML як дерево об'єктів. Він визначає, як отримувати доступ, маніпулювати та змінювати елементи документа за допомогою мов сценаріїв, таких як JavaScript.

Отже, в основному об’єктна модель документа є API який представляє та взаємодіє з документами HTML або XML.

монітор з електронно-променевою трубкою

DOM - це a W3C (Консорціум World Wide Web) стандарт і він визначає стандарт для доступу до документів.

Стандарт W3C Dom розділений на три різні частини:

Ядро DOM – стандартна модель для всіх типів документів
XML DOM – стандартна модель для документів XML
HTML DOM – стандартна модель для документів HTML

HTML DOM

HTML DOM є стандартом модель об'єкта та інтерфейс програмування для HTML документи. HTML DOM це спосіб представлення веб-сторінки в a структурований ієрархічний спосіб щоб програмістам і користувачам було легше ковзати по документу.

За допомогою HTML DOM ми можемо легко отримувати доступ до тегів, ідентифікаторів, класів, атрибутів або елементів HTML і керувати ними за допомогою команд або методів, наданих об’єктом документа.

Використовуючи DOM JavaScript, ми отримуємо доступ до HTML, а також до CSS веб-сторінки, а також можемо змінювати поведінку елементів HTML.

Чому потрібен DOM?

HTML звик структура веб-сторінки та Javascript використовується для додавання поведінка на наші веб-сторінки. Коли файл HTML завантажується в браузер, JavaScript не може зрозуміти документ HTML безпосередньо. Тому він інтерпретує та взаємодіє з об’єктною моделлю документа (DOM), яка створюється браузером на основі документа HTML.

DOM — це в основному представлення того самого HTML-документа, але в деревоподібній структурі, що складається з об’єктів. JavaScript не може зрозуміти теги() у документі HTML, але може зрозуміти об’єкт h1 у DOM.

JavaScript легко інтерпретує DOM, використовуючи його як міст для доступу та маніпулювання елементами. DOM Javascript дозволяє отримати доступ до кожного з об’єктів (h1, p тощо) за допомогою різних функцій.

поличні собаки

Об’єктна модель документа (DOM) є важливою для веб-розробки з кількох причин:

Динамічні веб-сторінки: Він дозволяє створювати динамічні веб-сторінки. Він дає змогу JavaScript отримувати доступ до вмісту, структури та стилю сторінки та динамічно керувати ними, що забезпечує інтерактивний і чутливий веб-досвід, наприклад оновлення вмісту без перезавантаження всієї сторінки або миттєвої реакції на дії користувача.
Інтерактивність: За допомогою DOM ви можете реагувати на дії користувача (наприклад, клацання, введення чи прокручування) і відповідним чином змінювати веб-сторінку.
Оновлення вмісту: Якщо ви хочете оновити вміст, не оновлюючи всю сторінку, DOM увімкне цільові зміни, зробивши веб-програми ефективнішими та зручнішими для користувача.
Кросбраузерність: Різні браузери можуть відтворювати HTML і CSS по-різному. DOM забезпечує стандартизований спосіб взаємодії з елементами сторінки.
Односторінкові програми (SPA): Програми, створені за допомогою фреймворків, таких як React або Angular, значною мірою покладаються на DOM для ефективного рендерингу та оновлення вмісту в межах однієї HTML-сторінки без перезавантаження повної сторінки.

Структура DOM

DOM можна розглядати як дерево або ліс (більш ніж одне дерево). Термін модель структури іноді використовується для опису деревоподібного представлення документа.

Кожна гілка дерева закінчується вузлом, і кожен вузол містить об’єкти. Прослуховувачі подій можуть бути додані до вузлів і активовані при виникненні певної події. Однією з важливих властивостей структурних моделей DOM є структурний ізоморфізм : якщо будь-які дві реалізації DOM використовуються для створення представлення того самого документа, вони створять ту саму модель структури з абсолютно однаковими об’єктами та зв’язками.

Чому DOM називають об’єктною моделлю?

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

Властивості DOM

Давайте подивимося на властивості об’єкта документа, до яких можна отримати доступ і змінити об’єкт документа.

Представництво DOM

Об'єкт Window : Window Object — це об’єкт браузера, який завжди знаходиться на вершині ієрархії. Це як API, який використовується для встановлення та доступу до всіх властивостей і методів браузера. Він автоматично створюється браузером.
Об'єкт документа: Коли документ HTML завантажується у вікно, він стає об’єктом документа. Об’єкт «документ» має різні властивості, які посилаються на інші об’єкти, які дозволяють отримувати доступ до вмісту веб-сторінки та змінювати його. Якщо потрібно отримати доступ до будь-якого елемента на сторінці HTML, ми завжди починаємо з доступу до об’єкта «документ». Об'єкт документа є властивістю об'єкта вікна.
Об'єкт форми: Він представлений форму теги.
Об'єкт посилання : Він представлений посилання теги.
Об’єкт прив’язки : Він представлений a href теги.
Елементи керування формою: Форма може мати багато елементів керування, таких як текстові поля, кнопки, перемикачі, прапорці тощо.

Методи об'єкта документа

DOM надає різні методи, які дозволяють користувачам взаємодіяти з документом і маніпулювати ним. Нижче наведено кілька поширених методів DOM:

метод	опис
писати (рядок)	Записує заданий рядок у документі.
getElementById()	Повертає елемент із вказаним значенням ідентифікатора.
getElementsByName()	Повертає всі елементи, що мають задане значення імені.
getElementsByTagName()	Повертає всі елементи, що мають вказане ім’я тегу.
getElementsByClassName()	Повертає всі елементи, що мають вказане ім’я класу.

приклад: У цьому прикладі ми використовуємо ідентифікатор елемента HTML, щоб знайти елемент HTML DOM.

HTML

     techcodeview.comh2>Портал інформатики для фанатів. p>
Цей приклад ілюструє метод getElementByIdb>. p>
p>

TechCodeview