Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Esplorazione delle Proprietà DOM in JavaScript | Manipolazione del DOM per lo Sviluppo Web Interattivo
Padronanza Avanzata di JavaScript

bookEsplorazione delle Proprietà DOM in JavaScript

JavaScript offre diverse proprietà per accedere e manipolare il contenuto. Comprendere queste proprietà consente di aggiornare dinamicamente il contenuto delle pagine web in base alle interazioni dell'utente o ad altre condizioni.

InnerHTML

La proprietà innerHTML consente di ottenere o impostare il contenuto HTML di un elemento, inclusi tag e testo. È una delle proprietà più utilizzate per aggiornare dinamicamente il contenuto della pagina.

index.html

index.html

index.js

index.js

copy

La proprietà innerHTML recupera tutto il contenuto, inclusi i tag HTML, e consente di inserire o aggiornare il contenuto con tag HTML.

TextContent

La proprietà textContent ottiene o imposta il contenuto testuale di un elemento, rimuovendo eventuali tag HTML. Ideale quando è necessario lavorare con testo semplice senza considerare la struttura HTML.

index.html

index.html

index.js

index.js

copy

La proprietà textContent recupera solo il contenuto testuale, ignorando i tag HTML, e imposta testo semplice, eseguendo automaticamente l'escape di eventuali tag.

Valore

La proprietà value viene utilizzata con elementi di modulo come <input>, <textarea> e <select>, consentendo di ottenere o impostare il valore inserito dall'utente.

index.html

index.html

index.js

index.js

copy

Il value recupera il valore corrente degli elementi del modulo e imposta un nuovo valore per gli elementi input, textarea o select.

Differenze tra InnerHTML e TextContent

Esempio pratico: aggiornamento di un profilo utente

Immagina una pagina del profilo utente in cui vengono visualizzati i dati iniziali e l'utente può aggiornare i dettagli del proprio profilo utilizzando un modulo. Quando l'utente invia il modulo, il contenuto della pagina si aggiorna dinamicamente.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Inizialmente, il profilo mostra un nome utente e una biografia predefiniti, che possono essere modificati tramite i campi di input. Quando si clicca sul pulsante "Salva modifiche", JavaScript aggiorna il profilo visualizzato: textContent aggiorna il nome utente come testo semplice, mentre innerHTML aggiorna la biografia permettendo una formattazione HTML di base, riflettendo eventuali modifiche apportate dall'utente.

1. Cosa fa la proprietà innerHTML?

2. Quando si utilizza textContent invece di innerHTML?

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

4. Quale proprietà viene utilizzata per ottenere o impostare il valore di un elemento <input>?

question mark

Cosa fa la proprietà innerHTML?

Select the correct answer

question mark

Quando si utilizza textContent invece di innerHTML?

Select the correct answer

question mark

Quale sarà l'output del seguente codice?

Select the correct answer

question mark

Quale proprietà viene utilizzata per ottenere o impostare il valore di un elemento <input>?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 6

Chieda ad AI

expand

Chieda ad AI

ChatGPT

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

Awesome!

Completion rate improved to 2.22

bookEsplorazione delle Proprietà DOM in JavaScript

Scorri per mostrare il menu

JavaScript offre diverse proprietà per accedere e manipolare il contenuto. Comprendere queste proprietà consente di aggiornare dinamicamente il contenuto delle pagine web in base alle interazioni dell'utente o ad altre condizioni.

InnerHTML

La proprietà innerHTML consente di ottenere o impostare il contenuto HTML di un elemento, inclusi tag e testo. È una delle proprietà più utilizzate per aggiornare dinamicamente il contenuto della pagina.

index.html

index.html

index.js

index.js

copy

La proprietà innerHTML recupera tutto il contenuto, inclusi i tag HTML, e consente di inserire o aggiornare il contenuto con tag HTML.

TextContent

La proprietà textContent ottiene o imposta il contenuto testuale di un elemento, rimuovendo eventuali tag HTML. Ideale quando è necessario lavorare con testo semplice senza considerare la struttura HTML.

index.html

index.html

index.js

index.js

copy

La proprietà textContent recupera solo il contenuto testuale, ignorando i tag HTML, e imposta testo semplice, eseguendo automaticamente l'escape di eventuali tag.

Valore

La proprietà value viene utilizzata con elementi di modulo come <input>, <textarea> e <select>, consentendo di ottenere o impostare il valore inserito dall'utente.

index.html

index.html

index.js

index.js

copy

Il value recupera il valore corrente degli elementi del modulo e imposta un nuovo valore per gli elementi input, textarea o select.

Differenze tra InnerHTML e TextContent

Esempio pratico: aggiornamento di un profilo utente

Immagina una pagina del profilo utente in cui vengono visualizzati i dati iniziali e l'utente può aggiornare i dettagli del proprio profilo utilizzando un modulo. Quando l'utente invia il modulo, il contenuto della pagina si aggiorna dinamicamente.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Inizialmente, il profilo mostra un nome utente e una biografia predefiniti, che possono essere modificati tramite i campi di input. Quando si clicca sul pulsante "Salva modifiche", JavaScript aggiorna il profilo visualizzato: textContent aggiorna il nome utente come testo semplice, mentre innerHTML aggiorna la biografia permettendo una formattazione HTML di base, riflettendo eventuali modifiche apportate dall'utente.

1. Cosa fa la proprietà innerHTML?

2. Quando si utilizza textContent invece di innerHTML?

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

4. Quale proprietà viene utilizzata per ottenere o impostare il valore di un elemento <input>?

question mark

Cosa fa la proprietà innerHTML?

Select the correct answer

question mark

Quando si utilizza textContent invece di innerHTML?

Select the correct answer

question mark

Quale sarà l'output del seguente codice?

Select the correct answer

question mark

Quale proprietà viene utilizzata per ottenere o impostare il valore di un elemento <input>?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 6
some-alt