Вивчайте Що таке об'єктна модель документа (DOM)? | Маніпулювання DOM для Інтерактивної Веб-Розробки

Свайпніть щоб показати меню

Тепер, коли ми розглянули класи JavaScript, давайте переключимо нашу увагу на Document Object Model (DOM) — інтерфейс, який дозволяє маніпулювати веб-сторінками. У наступному розділі буде розглянуто, як JavaScript взаємодіє з DOM для створення динамічного, інтерактивного контенту.

Уявіть DOM як родинне дерево. Кожен елемент у документі — це як член родини, пов'язаний відносинами: батьки, діти та брати/сестри.

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

Взаємозв'язок між HTML та DOM

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

HTML визначає початкову структуру родинного дерева, хто з ким пов'язаний, але воно є статичним і не змінюється самостійно;
DOM — це родинне дерево в реальному часі, і його можна змінювати. Нові члени (елементи) можуть додаватися або видалятися, а відносини (батько-дитина, брати/сестри) можуть оновлюватися за допомогою JavaScript.

Наприклад:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
  </body>
</html>

Цей HTML створює базове сімейне дерево з вузлом <html> як батьківським, а вузлами <head> і <body> як дочірніми. Усередині тіла, <h1> і <p> є сусідніми елементами.

Ця структура є живою, інтерактивною версією HTML у DOM, де JavaScript може змінювати взаємозв'язки між вузлами (членами сім'ї).

Як JavaScript взаємодіє з DOM

JavaScript може отримувати доступ до DOM і змінювати його для внесення змін у сімейне дерево в режимі реального часу. Можна додавати нових членів, видаляти існуючих або змінювати їхню інформацію.

Доступ до членів сім'ї: Так само, як можна знайти конкретну особу в сімейному дереві, JavaScript може отримати доступ до окремих вузлів у DOM за допомогою методів, таких як document.getElementById() або document.querySelector();
Зміна інформації: Після доступу до члена сім'ї його дані можна оновити. Наприклад, JavaScript може змінити текстовий вміст або атрибути елемента за допомогою властивостей, таких як innerHTML або textContent;
Модифікація взаємозв'язків: JavaScript також може додавати нових членів до дерева або видаляти їх. Це здійснюється шляхом зміни структури DOM за допомогою методів, таких як appendChild() або removeChild().

Приклад

Розгляньте цей HTML:

<p id="greeting">Hello, World!</p>

За допомогою JavaScript можна змінити текст абзацу, так само як оновити ім'я члена родини:

// Access the family member (DOM element) using its ID
const greetingElement = document.getElementById('greeting');

// Modify the family member's details (DOM content)
greetingElement.textContent = 'Hello, JavaScript!';

Після виконання JavaScript-коду дерево родини (DOM) оновлюється, і текст абзацу змінюється з "Hello, World!" на "Hello, JavaScript!"

index.html

index.js

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 1

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Секція 2. Розділ 1