Lavorare con gli Attributi degli Elementi nel DOM

Gli attributi sono valori aggiunti agli elementi HTML per fornire informazioni aggiuntive o modificarne il comportamento. JavaScript offre diversi metodi per lavorare con questi attributi, consentendo di ottenere, impostare, rimuovere o verificare dinamicamente la presenza di attributi specifici.

GetAttribute()

getAttribute() viene utilizzato per recuperare il valore di un attributo specificato da un elemento. È utile quando è necessario accedere a valori di attributi specifici come href, src, class, ecc.

index.html

index.js

Accede al valore dell'attributo href dell'elemento ancora (<a>).

SetAttribute()

setAttribute() viene utilizzato per aggiungere un nuovo attributo o modificare il valore di un attributo esistente su un elemento.

index.html

index.js

Imposta o aggiorna l'attributo alt dell'immagine, consentendo modifiche dinamiche in base alle azioni dell'utente o alla logica dell'applicazione.

RemoveAttribute()

removeAttribute() rimuove un attributo specificato da un elemento, risultando utile per attivare o disattivare condizionalmente attributi in base a determinati eventi o stati.

index.html

index.js

Rimuove l'attributo disabled, abilitando il pulsante per l'interazione.

HasAttribute()

hasAttribute() verifica se un elemento possiede un attributo specificato. Questo metodo è particolarmente utile per la logica condizionale, assicurando che determinati attributi esistano prima di eseguire ulteriori azioni.

index.html

index.js

Verifica se l'attributo required esiste nel campo di input e registra un messaggio di conseguenza.

Differenze tra Proprietà e Attributi

Sebbene proprietà e attributi vengano spesso utilizzati come sinonimi, svolgono ruoli diversi nel DOM. Analizziamo le loro differenze.

index.html

index.js

L'attributo value conserva il valore originale definito nell'HTML;
La proprietà value riflette lo stato attuale e dinamicamente aggiornato dell'input.

Esempio pratico: Gestione dei dettagli prodotto su un sito e-commerce

Si immagini una sezione dettagli prodotto in cui gli utenti possono aggiornare informazioni come disponibilità, stato in evidenza e opzioni di spedizione. Questo esempio mostra come gli attributi vengano utilizzati per controllare dinamicamente questi aspetti.

index.html

index.css

index.js

Il metodo setAttribute() viene utilizzato per aggiungere dinamicamente attributi specifici agli elementi in base alle azioni dell'utente. Ad esempio, quando lo stato di disponibilità viene impostato su "Esaurito", setAttribute() aggiunge una classe out-of-stock per applicare uno stile unico. Allo stesso modo, aggiunge un attributo data-featured alla casella di controllo featured quando il prodotto viene contrassegnato come in evidenza.

Il metodo removeAttribute() rimuove questi attributi quando non sono più necessari. Ad esempio, rimuove la classe out-of-stock quando si torna a "Disponibile" e rimuove l'attributo data-featured se il prodotto non è più contrassegnato come in evidenza. Inoltre, utilizza removeAttribute() per alternare la visibilità delle informazioni di spedizione aggiungendo o rimuovendo l'attributo hidden.

Infine, hasAttribute() verifica la presenza di questi attributi, come controllare se l'attributo data-featured esiste prima di aggiornare lo stato featured o controllare l'attributo hidden sulle informazioni di spedizione per determinarne lo stato di visibilità.

1. Quale metodo viene utilizzato per recuperare il valore di un attributo da un elemento?

2. Cosa fa il metodo `setAttribute()`?

3. Quale sarà l'output del seguente codice?

Quale metodo viene utilizzato per recuperare il valore di un attributo da un elemento?

Select the correct answer

getAttribute()

setAttribute()

removeAttribute()

hasAttribute()

Cosa fa il metodo setAttribute()?

Select the correct answer

Aggiunge un nuovo attributo o aggiorna il valore di un attributo esistente.

Rimuove un attributo da un elemento.

Verifica se un attributo esiste su un elemento.

Recupera il valore di un attributo.

Quale sarà l'output del seguente codice?

Select the correct answer

true

false

null

Un errore

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 7

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you explain the main differences between attributes and properties in more detail?

How do I use these attribute methods in a real JavaScript example?

What are some common mistakes when working with attributes and properties?

Awesome!

Completion rate improved to 2.22

Lavorare con gli Attributi degli Elementi nel DOM

Scorri per mostrare il menu

GetAttribute()

index.html

index.js

Accede al valore dell'attributo href dell'elemento ancora (<a>).

SetAttribute()

setAttribute() viene utilizzato per aggiungere un nuovo attributo o modificare il valore di un attributo esistente su un elemento.

index.html

index.js

Imposta o aggiorna l'attributo alt dell'immagine, consentendo modifiche dinamiche in base alle azioni dell'utente o alla logica dell'applicazione.

RemoveAttribute()

removeAttribute() rimuove un attributo specificato da un elemento, risultando utile per attivare o disattivare condizionalmente attributi in base a determinati eventi o stati.

index.html

index.js

Rimuove l'attributo disabled, abilitando il pulsante per l'interazione.

HasAttribute()

index.html

index.js

Verifica se l'attributo required esiste nel campo di input e registra un messaggio di conseguenza.

Differenze tra Proprietà e Attributi

Sebbene proprietà e attributi vengano spesso utilizzati come sinonimi, svolgono ruoli diversi nel DOM. Analizziamo le loro differenze.

index.html

index.js

L'attributo value conserva il valore originale definito nell'HTML;
La proprietà value riflette lo stato attuale e dinamicamente aggiornato dell'input.

Esempio pratico: Gestione dei dettagli prodotto su un sito e-commerce

index.html

index.css

index.js

1. Quale metodo viene utilizzato per recuperare il valore di un attributo da un elemento?

2. Cosa fa il metodo `setAttribute()`?

3. Quale sarà l'output del seguente codice?

Quale metodo viene utilizzato per recuperare il valore di un attributo da un elemento?

Select the correct answer

getAttribute()

setAttribute()

removeAttribute()

hasAttribute()

Cosa fa il metodo setAttribute()?

Select the correct answer

Aggiunge un nuovo attributo o aggiorna il valore di un attributo esistente.

Rimuove un attributo da un elemento.

Verifica se un attributo esiste su un elemento.

Recupera il valore di un attributo.

Quale sarà l'output del seguente codice?

Select the correct answer

true

false

null

Un errore

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 7

Lavorare con gli Attributi degli Elementi nel DOM

GetAttribute()

SetAttribute()

RemoveAttribute()

HasAttribute()

Differenze tra Proprietà e Attributi

Esempio pratico: Gestione dei dettagli prodotto su un sito e-commerce

1. Quale metodo viene utilizzato per recuperare il valore di un attributo da un elemento?

2. Cosa fa il metodo setAttribute()?

3. Quale sarà l'output del seguente codice?

Awesome!

Lavorare con gli Attributi degli Elementi nel DOM

GetAttribute()

SetAttribute()

RemoveAttribute()

HasAttribute()

Differenze tra Proprietà e Attributi

Esempio pratico: Gestione dei dettagli prodotto su un sito e-commerce

1. Quale metodo viene utilizzato per recuperare il valore di un attributo da un elemento?

2. Cosa fa il metodo setAttribute()?

3. Quale sarà l'output del seguente codice?

2. Cosa fa il metodo `setAttribute()`?

2. Cosa fa il metodo `setAttribute()`?