DOM Manipulation
Learn how to dynamically update web pages to create interactive business applications.
What You'll Learn
Description
La manipolazione del DOM è il modo in cui una pagina web cambia dopo il caricamento: mostrare un messaggio, aggiungere una riga a una tabella, validare un form, reagire a un clic. Questo tutorial copre le API native del browser (getElementById, querySelector, textContent, classList, addEventListener, createElement) su cui è costruito ogni framework.
Lavorerai attraverso quattro capitoli con esempi di codice eseguibili e una demo interattiva di lista di cose da fare su cui puoi cliccare nel tuo browser, affiancata dal codice DOM vanilla equivalente. Ogni capitolo mostra anche come descrivere il comportamento desiderato a un assistente IA e verificare ciò che restituisce.
Alla fine saprai selezionare gli elementi in sicurezza, collegare gli eventi, renderizzare liste da un array di dati, validare un form all'invio ed evitare i pattern di layout thrashing che fanno sembrare lente le pagine.
What's inside
- 1.Selezionare gli elementi — che cos'è il DOM, trovare gli elementi con getElementById e querySelector e descrivere il cambiamento desiderato a un assistente IA.
- 2.Testo, stili ed eventi — leggere e modificare testo, attributi e stili, e collegare i tuoi primi listener di click e input.
- 3.Eventi e rendering — creare e rimuovere elementi, la delega degli eventi e il rendering del DOM da un array di dati.
- 4.Form e prestazioni — gestire l'invio dei form con la validazione, più batching e debouncing per app rapide e reattive.