Операції DOM CRUD

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

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

Ви можете виконувати CRUD-операції (Create — створення, Read — читання, Update — оновлення, Delete — видалення) за допомогою цих методів.

1. Доступ до елементів (Read)

Щоб щось змінити, спочатку потрібно це знайти. Використовуйте ці методи:

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()

2. Створення елементів (Create)

Ви можете створювати нові HTML-елементи за допомогою JavaScript.

  • createElement("tagName") створює елемент у пам'яті.
  • append() додає вміст у кінець батьківського елемента.
  • appendChild() додає один вузол як останню дитину.
  • prepend() додає вміст на початок батьківського елемента.
  • before() вставляє елемент перед певним об'єктом.
  • after() вставляє елемент після певного об'єкта.
  • insertBefore() розміщує елемент перед конкретною дитиною.

Примітка: Елемент залишається в пам'яті, доки ви не додасте його на сторінку.

3. Оновлення елементів (Update)

Ви можете змінювати існуючий вміст за допомогою цих властивостей:

  • innerText: Змінює лише видимий текст.
  • textContent: Змінює весь текст, включаючи прихований.
  • innerHTML: Змінює вміст і дозволяє додавати HTML-теги.

4. Робота з атрибутами (Update)

Атрибути надають додаткову інформацію про елементи.

  • setAttribute(name, value): Встановлює або замінює атрибут.
  • getAttribute(name): Отримує значення атрибута.
  • removeAttribute(name): Видаляє атрибут.
  • hasAttribute(name): Перевіряє, чи існує атрибут.

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

5. Видалення елементів (Delete)

Щоб видалити елемент зі сторінки, використовуйте:

  • remove()

Підсумок CRUD-процесу:

  • Create: createElement()
  • Update: innerText = "New text"
  • Add: appendChild()
  • Delete: remove()

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

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