Operacje CRUD w DOM

Document Object Model (DOM) to struktura drzewiasta Twojego kodu HTML. JavaScript wykorzystuje ją do uzyskiwania dostępu oraz zmiany każdego elementu, atrybutu i fragmentu tekstu na stronie.

Gdy klikasz przycisk, a strona aktualizuje się bez odświeżania, widzisz manipulację DOM w działaniu.

Oto jak wykonywać operacje CRUD (Create, Read, Update, Delete – Tworzenie, Odczyt, Aktualizacja, Usuwanie).

  1. Read: Uzyskiwanie dostępu do elementów Użyj tych metod, aby znaleźć elementy na swojej stronie:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create: Tworzenie nowych elementów Możesz generować nowe elementy HTML za pomocą JavaScriptu.
  • createElement(): Tworzy nowy znacznik w pamięci.
  • append(): Dodaje zawartość na końcu elementu nadrzędnego.
  • appendChild(): Dodaje pojedynczy węzeł jako ostatnie dziecko.
  • prepend(): Dodaje zawartość na początku elementu nadrzędnego.
  • before(): Wstawia element przed konkretnym elementem docelowym.
  • after(): Wstawia element po konkretnym elemencie docelowym.
  • insertBefore(): Umieszcza nowy element przed istniejącym dzieckiem.
  1. Update: Zmiana zawartości Zmieniaj to, co użytkownicy widzą na ekranie:
  • innerText: Aktualizuje tylko widoczny tekst.
  • textContent: Aktualizuje cały tekst, w tym tekst ukryty.
  • innerHTML: Aktualizuje zawartość i pozwala na dodawanie znaczników HTML.
  1. Attributes: Zarządzanie właściwościami Atrybuty dodają dodatkowe informacje do Twoich znaczników.
  • setAttribute(): Ustawia nową wartość atrybutu. Pamiętaj, że zastępuje to starą wartość.
  • getAttribute(): Pobiera aktualną wartość.
  • removeAttribute(): Usuwa atrybut.
  • hasAttribute(): Sprawdza, czy dany atrybut istnieje.

Pro tip: Użyj classList.add() aby dodać klasę bez usuwania obecnych. Użyj setAttribute() dla niestandardowych atrybutów.

  1. Delete: Usuwanie elementów Aby usunąć element ze strony, użyj:
  • remove()

Podsumowanie przepływu CRUD:

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

Opanowanie tych metod pozwala na budowanie interaktywnych narzędzi, takich jak listy zadań, kalkulatory czy walidatory formularzy. Jest to kluczowy krok w nauce nowoczesnych frameworków webowych.

Źródło: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka

Opcjonalna społeczność edukacyjna: https://t.me/GyaanSetuAi