Operazioni CRUD sul DOM

Il Document Object Model (DOM) è il modo in cui i browser rappresentano l'HTML. Trasforma ogni elemento, attributo e frammento di testo in un oggetto. JavaScript utilizza questi oggetti per modificare ciò che vedi sullo schermo.

Quando clicchi su un pulsante e una pagina si aggiorna senza ricaricarsi, JavaScript sta modificando il DOM.

Puoi eseguire le operazioni CRUD (Create, Read, Update, Delete) utilizzando questi metodi.

  1. Accesso agli elementi (Read) Per modificare qualcosa, devi prima trovarla. Usa questi metodi:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Creazione di elementi (Create) Puoi generare nuovi elementi HTML utilizzando JavaScript.
  • createElement("tagName") crea l'elemento 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 elemento specifico.
  • after() inserisce un elemento dopo un elemento specifico.
  • insertBefore() posiziona un elemento prima di un figlio specifico.

Nota: Un elemento rimane in memoria finché non lo aggiungi alla pagina.

  1. Aggiornamento degli elementi (Update) Puoi modificare il contenuto esistente utilizzando queste proprietà:
  • innerText: Modifica solo il testo visibile.
  • textContent: Modifica tutto il testo, incluso quello nascosto.
  • innerHTML: Modifica il contenuto e ti permette di aggiungere tag HTML.
  1. Lavorare con gli attributi (Update) Gli attributi forniscono informazioni extra sugli elementi.
  • setAttribute(name, value): Imposta o sostituisce un attributo.
  • getAttribute(name): Recupera il valore di un attributo.
  • removeAttribute(name): Elimina un attributo.
  • hasAttribute(name): Verifica se un attributo esiste.

Consiglio pro: Usa classList.add() per aggiungere una classe senza rimuovere quelle precedenti. setAttribute() sostituisce l'intero valore.

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

Riepilogo di un flusso CRUD:

  • Create: createElement()
  • Update: innerText = "Nuovo testo"
  • Add: appendChild()
  • Delete: remove()

Padroneggiare questi metodi ti permette di costruire applicazioni interattive come liste di cose da fare (to-do list) o calcolatrici. Questa è una competenza fondamentale per lo sviluppo front-end.

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