Operazioni CRUD sul DOM

Il Document Object Model (DOM) è una struttura ad albero per il tuo HTML. JavaScript lo utilizza per accedere e modificare ogni elemento, attributo e frammento di testo in una pagina.

Quando clicchi su un pulsante e la pagina si aggiorna senza ricaricarsi, stai vedendo la manipolazione del DOM in azione.

Ecco come eseguire le operazioni CRUD (Create, Read, Update, Delete).

  1. Read: Accesso agli elementi Usa questi metodi per trovare gli elementi nella tua pagina:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create: Creazione di nuovi elementi Puoi generare nuovi elementi HTML utilizzando JavaScript.
  • createElement(): Crea un nuovo tag in memoria.
  • append(): Aggiunge contenuto alla fine di un elemento genitore.
  • appendChild(): Aggiunge un singolo nodo come ultimo figlio.
  • prepend(): Aggiunge contenuto all'inizio di un elemento genitore.
  • before(): Inserisce un elemento prima di un target specifico.
  • after(): Inserisce un elemento dopo un target specifico.
  • insertBefore(): Posiziona un nuovo elemento prima di un figlio esistente.
  1. Update: Modifica del contenuto Modifica ciò che gli utenti vedono sullo schermo:
  • innerText: Aggiorna solo il testo visibile.
  • textContent: Aggiorna tutto il testo, incluso quello nascosto.
  • innerHTML: Aggiorna il contenuto e ti permette di aggiungere tag HTML.
  1. Attributes: Gestione delle proprietà Gli attributi aggiungono informazioni extra ai tuoi tag.
  • setAttribute(): Imposta un nuovo valore per un attributo. Nota che questo sostituisce il valore precedente.
  • getAttribute(): Ottiene il valore corrente.
  • removeAttribute(): Elimina un attributo.
  • hasAttribute(): Controlla se un attributo esiste.

Suggerimento pro: Usa classList.add() per aggiungere una classe senza eliminare quelle attuali. Usa setAttribute() per gli attributi personalizzati.

  1. Delete: Rimozione degli elementi Per rimuovere un elemento dalla pagina, usa:
  • remove()

Riepilogo del flusso CRUD:

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

Padroneggiare questi metodi ti permette di costruire strumenti interattivi come to-do list, calcolatrici e validatori di moduli. È un passo fondamentale verso l'apprendimento dei moderni framework web.

Fonte: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka

Community di apprendimento opzionale: https://t.me/GyaanSetuAi