Що таке DOM (Document Object Model)?

DOM (Document Object Model) - це інтерфейс програмування, який надає структуроване представлення документів, таких як HTML, XHTML або XML, у вигляді дерева об’єктів. DOM дозволяє програмам та скриптам змінювати структуру, стиль та вміст веб-сторінок.

Основні концепції DOM

  1. Документ - це основний об’єкт, який представляє всі інші елементи веб-сторінки. Документ є вихідним пунктом для навігації та взаємодії з DOM.

  2. Елементи є складовими частинами веб-сторінки, такими як теги <div>, <p>, <span> тощо. Вони можуть містити інші елементи, текст або атрибути.

  3. Атрибути забезпечують додаткову інформацію про елементи. Наприклад, у тега <img> атрибут src вказує шлях до зображення.

  4. Текстові вузли - це текстовий вміст всередині елементів. Наприклад, текст між тегами <p> і </p> є текстовим вузлом.

  5. Колекції і колекції Node. DOM надає зручні засоби для роботи з групами елементів або текстових вузлів. Наприклад, ви можете отримати всі елементи з певним тегом або класом.

  6. Методи і властивості. DOM надає набір методів і властивостей для взаємодії з елементами, текстовими вузлами та атрибутами. Ці методи дозволяють змінювати вміст, стилі, атрибути тощо.

  7. Навігація. DOM дозволяє легко навігувати між елементами та їхніми батьківськими, дочірніми та сусідніми елементами в дереві.

  8. Події. DOM дозволяє прикріплювати обробники подій до елементів, таких як кліки мишею або натискання клавіші. Це дозволяє реагувати на дії користувача на сторінці.

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