74 lines
3.0 KiB
JavaScript
74 lines
3.0 KiB
JavaScript
// TUTORIAL INTERATTIVO: DOM Parte 1 - Selezione e Manipolazione
|
|
// Apri il file 'tutorial_parte1.html' nel browser e guarda la CONSOLE (F12).
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 1. Selezionare tramite ID ===
|
|
* Il metodo `querySelector` seleziona un singolo elemento.
|
|
* Possiamo usare un selettore CSS per identificare l'elemento.
|
|
*/
|
|
// TODO: Seleziona l'elemento h1 con id 'titolo-principale' e salvalo in una variabile.
|
|
// TODO: Stampa la variabile in console.
|
|
// TODO: Seleziona l'elemento p e salvalo in una variabile.
|
|
// TODO: Stampa la variabile in console e verifica q chi appartiene il paragrafo.
|
|
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 2. QuerySelectorAll ===
|
|
* `querySelector` trova il PRIMO elemento che corrisponde al selettore CSS.
|
|
* `querySelectorAll` trova TUTTI gli elementi e restituisce una lista.
|
|
*/
|
|
// TODO: Usa `querySelectorAll` per selezionare tutti gli elementi con classe 'paragrafo-testo'.
|
|
// TODO: Usa `querySelectorAll` per selezionare tutti gli elementi p nella pagina.
|
|
// TODO: Stampa entrambi i risultati in console.
|
|
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 3. Modificare Testo e HTML ===
|
|
* `textContent` modifica solo il testo visibile.
|
|
* `value` modifica il valore di input (es. campi di testo).
|
|
* `innerHTML` può inserire tag HTML all'interno dell'elemento.
|
|
*/
|
|
// TODO: Cambia il testo dell'elemento 'titolo-principale' in "Workshop JavaScript".
|
|
// TODO: Cambia il valore dell'input con id 'input-nome' a "Mario Rossi".
|
|
// TODO: Cambia il testo del paragrafo con id 'paragrafo-unico' in "<b>Testo in grassetto</b>".
|
|
// TODO: Usa `innerHTML` al posto di `textContent` per inserire il testo in grassetto.
|
|
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 4. Leggere e Modificare Attributi ===
|
|
* `getAttribute` legge un valore (es. href, src, id).
|
|
* `setAttribute` imposta un nuovo valore.
|
|
* Un attributo si può anche accedere direttamente come proprietà dell'elemento.
|
|
*/
|
|
// TODO: Seleziona il link con id 'link-google'.
|
|
// TODO: Imposta il suo attributo 'href' a 'https://www.google.com'.
|
|
// TODO: Cambia il testo del link in "Vai a Google".
|
|
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 5. Modificare lo Stile (CSS) ===
|
|
* Puoi accedere alle proprietà CSS tramite l'oggetto `.style`.
|
|
* Le proprietà usano il camelCase (es. background-color diventa backgroundColor).
|
|
*/
|
|
// TODO: Seleziona il div con id 'box-stile'.
|
|
// TODO: Cambia il suo `style.color` in 'red'.
|
|
// TODO: Cambia il suo `style.border` in '2px solid red'.
|
|
|
|
|
|
/**
|
|
* ===========================================
|
|
* === 6. Gestire le Classi CSS ===
|
|
* `classList` permette di aggiungere, rimuovere o alternare classi CSS.
|
|
* Metodi utili: .add(), .remove(), .toggle().
|
|
*/
|
|
// TODO: Seleziona nuovamente il div 'box-stile'.
|
|
// TODO: Aggiungi la classe 'evidenziato' (definita nel CSS) usando `classList.add`.
|
|
// TODO: Rimuovi la classe 'box' usando `classList.remove`.
|
|
// TODO: Alterna la classe 'box' o la classe 'evidenziato' usando `classList.toggle`.
|
|
|