61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
// TUTORIAL INTERATTIVO: DOM Parte 2 - Creazione, Rimozione ed Eventi
|
|
// Apri il file 'tutorial_parte2.html'.
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 1. Creazione di Elementi ===
|
|
* `document.createElement(tagName)` crea un nuovo elemento in memoria (non ancora visibile).
|
|
*/
|
|
// TODO: Crea un nuovo elemento 'li' e salvalo in una variabile chiamata `nuovoElemento`.
|
|
// TODO: Imposta il suo `textContent` a "Sono un nuovo elemento creato via JS".
|
|
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 2. Aggiunta di Elementi al DOM ===
|
|
* `genitore.appendChild(figlio)` o `genitore.append(figlio)` aggiunge l'elemento alla pagina.
|
|
*/
|
|
// TODO: Seleziona la lista `ul` con id 'lista-dinamica'.
|
|
// TODO: Aggiungi `nuovoElemento` alla lista usando `appendChild`.
|
|
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 3. Rimozione di Elementi ===
|
|
* `elemento.remove()` elimina l'elemento dal DOM.
|
|
*/
|
|
// TODO: Seleziona il PRIMO elemento `li` della lista (puoi usare querySelector che prende il primo).
|
|
// TODO: Rimuovilo usando il metodo `.remove()`.
|
|
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 4. AddEventListener (Click) ===
|
|
* Permette di eseguire una funzione quando avviene un evento.
|
|
*/
|
|
// TODO: Seleziona il bottone con id 'btn-aggiungi'.
|
|
// TODO: Aggiungi un ascoltatore per l'evento 'click'.
|
|
// TODO: Nella funzione, mostra un `alert("Hai cliccato il bottone!")`.
|
|
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 5. Eventi Comuni (Input) ===
|
|
* L'evento 'input' scatta ogni volta che si digita in un campo di testo.
|
|
*/
|
|
// TODO: Seleziona l'input con id 'input-utente' e lo span con id 'output-testo'.
|
|
// TODO: Aggiungi un listener 'input' al campo di testo.
|
|
// TODO: Nella funzione, copia il valore dell'input (`input.value`) dentro il `textContent` dello span.
|
|
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 6. Event Object (e.target) ===
|
|
* La funzione dell'evento riceve un argomento (spesso chiamato `e` o `event`) che contiene dettagli.
|
|
* `e.target` è l'elemento specifico che ha scatenato l'evento.
|
|
*/
|
|
// TODO: Seleziona l'intera lista `ul` ('lista-dinamica').
|
|
// TODO: Aggiungi un listener 'click' alla LISTA INTERA (non ai singoli li).
|
|
// TODO: Nella funzione, usa `e.target.style.color = 'red'`.
|
|
|