DOM CRUD операції

Об'єктна модель документа (DOM) — це деревоподібна структура вашого HTML. JavaScript використовує її для доступу до кожного елемента, атрибута та фрагмента тексту на сторінці, а також для їх зміни.

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

Ось як виконувати операції CRUD (Create — створення, Read — читання, Update — оновлення, Delete — видалення).

  1. Read: Доступ до елементів Використовуйте ці методи, щоб знайти елементи на вашій сторінці:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create: Створення нових елементів Ви можете створювати нові HTML-елементи за допомогою JavaScript.
  • createElement(): Створює новий тег у пам'яті.
  • append(): Додає вміст у кінець батьківського елемента.
  • appendChild(): Додає один вузол як останнього нащадка.
  • prepend(): Додає вміст на початок батьківського елемента.
  • before(): Вставляє елемент перед конкретною ціллю.
  • after(): Вставляє елемент після конкретної цілі.
  • insertBefore(): Розміщує новий елемент перед існуючим нащадком.
  1. Update: Зміна вмісту Змінюйте те, що користувачі бачать на екрані:
  • innerText: Оновлює лише видимий текст.
  • textContent: Оновлює весь текст, включаючи прихований.
  • innerHTML: Оновлює вміст і дозволяє додавати HTML-теги.
  1. Attributes: Управління властивостями Атрибути додають додаткову інформацію до ваших тегів.
  • setAttribute(): Встановлює нове значення для атрибута. Зверніть увагу, що це замінює старе значення.
  • getAttribute(): Отримує поточне значення.
  • removeAttribute(): Видаляє атрибут.
  • hasAttribute(): Перевіряє, чи існує атрибут.

Порада: Використовуйте classList.add(), щоб додати клас, не видаляючи наявні. Використовуйте setAttribute() для власних атрибутів.

  1. Delete: Видалення елементів Щоб видалити елемент зі сторінки, використовуйте:
  • remove()

Підсумок потоку CRUD:

  • Create: document.createElement("p")
  • Update: p.innerText = "Hello"
  • Read: document.getElementById("p")
  • Delete: p.remove()

Опанування цих методів дозволить вам створювати інтерактивні інструменти, такі як списки справ, калькулятори та валідатори форм. Це важливий крок до вивчення сучасних вебфреймворків.

Джерело: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka

Додаткова спільнота для навчання: https://t.me/GyaanSetuAi