JavaTutorial DOM script con esempio

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

JavaScript DOM ed Eventi offrono agli script il pieno controllo di una pagina web, permettendo al codice di leggere, modificare, aggiungere o rimuovere qualsiasi elemento visualizzato dal browser e di rispondere istantaneamente ogni volta che un visitatore clicca, digita o scorre la pagina.

  • 🌳 Tipi di nodo: I nodi elemento, testo, attributo e commento svolgono ciascuno un ruolo distinto all'interno dell'albero DOM.
  • 🔍 Selezione degli elementi: Le funzioni getElementById, querySelector e querySelectorAll individuano i nodi esatti con cui uno script deve interagire.
  • ️ Aggiornamento dei contenuti: innerHTML, textContent e setAttribute riscrivono ciò che un visitatore vede effettivamente sullo schermo.
  • 🧩 Nodi di costruzione: createElement e appendChild inseriscono nuovi elementi senza ricaricare la pagina.
  • 🗑️ Rimozione dei nodi: removeChild e remove rimuovono gli elementi indesiderati dall'albero attivo.
  • 🖱️ Gestione degli eventi: addEventListener associa gestori di eventi click, keyup e submit a qualsiasi elemento.
  • 🔄 Delegazione all'evento: Un singolo listener principale, insieme a event.target, gestisce i clic su molti elementi figli contemporaneamente.
  • 🤖 Debugging assistito dall'intelligenza artificiale: Gli assistenti di programmazione basati sull'IA aiutano trace problemi di propagazione delle emissioni e suggerimenti di modelli di delega per interfacce utente complesse.
Scopri di più

In cosa consiste il DOM JavaCopione?

JavaUno script può accedere a tutti gli elementi di una pagina web utilizzando il Document Object Model (DOM). Infatti, il browser web crea un DOM della pagina web quando questa viene caricata. Il modello DOM viene creato come un albero di oggetti in questo modo:

DOM dentro JavaCopione

Ogni elemento HTML in una pagina diventa un nodo all'interno di questo albero. I browser raggruppano i nodi DOM in alcuni tipi principali: i nodi elemento rappresentano tag come <p> or <div>, i nodi di testo contengono le parole visibili all'interno di un tag, i nodi attributo memorizzano valori come id or classe i nodi di commento preservano <!-- --> markup. Il nodo più in alto è sempre il document oggetto, e ogni altro elemento è un suo discendente.

Utilizzando il DOM, JavaCopione Può svolgere molteplici compiti. Può creare nuovi elementi e attributi, modificare elementi e attributi esistenti e persino rimuovere elementi e attributi esistenti. JavaGli script possono anche reagire a eventi esistenti e crearne di nuovi sulla pagina. Le sezioni seguenti illustrano come selezionare gli elementi, modificarli e collegare i gestori di eventi con esempi pratici ed eseguibili.

È utile ricordare che il DOM non è la stessa cosa del file sorgente HTML. L'HTML che un browser scarica è testo statico, ma il DOM che costruisce da quel testo è un modello a oggetti dinamico e in tempo reale. Qualsiasi modifica JavaLo script apportato al DOM viene visualizzato immediatamente sullo schermo, senza che il file HTML originale venga mai modificato.

Come selezionare gli elementi DOM in JavaCopione

Before JavaUno script può modificare qualsiasi elemento di una pagina, ma prima deve selezionare il nodo di destinazione. Il DOM offre diversi metodi di selezione, ognuno adatto a situazioni diverse:

  • getElementById(): restituisce l'unico elemento che corrisponde a un dato id attributo.
  • getElementsByClassName(): restituisce una collezione HTML dinamica di ogni elemento che possiede una determinata classe.
  • getElementsByTagName(): restituisce una raccolta HTML live di ogni elemento con un nome di tag specificato, come ad esempio p or li.
  • querySelector(): Restituisce il primo elemento che corrisponde a un qualsiasi selettore CSS.
  • querySelectorAll(): Restituisce una NodeList statica contenente tutti gli elementi che corrispondono a un selettore CSS.

La tabella seguente confronta i quattro metodi di selezione più comunemente utilizzati, in modo che possiate scegliere quello più adatto alle vostre esigenze.

Metodo Resi gradi Usato quando
getElementById Singolo elemento Conosci l'ID esatto e univoco del bersaglio.
getElementsByClassName Raccolta HTML dal vivo È necessario che ogni elemento condivida lo stesso nome di classe.
querySelector Elemento singolo (prima corrispondenza) Vuoi utilizzare un qualsiasi selettore CSS, non solo ID o classe.
querySelectorAll Elenco di nodi statici È necessario iterare su ogni corrispondenza con forEach.

querySelector e querySelectorAll accettano qualsiasi selettore CSS valido, il che li rende la scelta più flessibile per il codice moderno. Prova il frammento seguente in una pagina che contiene un elemento con id="title" e diversi elementi con class="item":

const heading = document.getElementById("title");
const itemsByClass = document.getElementsByClassName("item");
const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");
console.log(heading.textContent, itemsByClass.length, allItems.length);

I metodi getElementById e getElementsByClassName rimangono più veloci per le ricerche semplici, mentre querySelector e querySelectorAll sono preferibili quando la logica di selezione richiede la potenza della sintassi CSS completa, come ad esempio i selettori di attributi o di discendenti.

ARTICOLI CORRELATI

Come modificare, creare e rimuovere elementi DOM

Una volta selezionato un elemento, JavaUno script può leggere o riscrivere il suo contenuto, i suoi attributi e persino la sua esistenza nell'albero. Utilizzando il DOM, JavaUno script può creare nuovi elementi e attributi, modificare elementi e attributi esistenti e rimuovere completamente elementi e attributi esistenti.

Modifica il contenuto con getElementById e innerHTML

  1. getElementById: per accedere agli elementi e agli attributi il ​​cui ID è impostato.
  2. innerHTML: per accedere al contenuto di un elemento.

Provate voi stessi questo esempio:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>

La finestra di avviso conferma che getElementById ha individuato l'intestazione e innerHTML ha restituito il testo in essa contenuto.

Leggi ogni paragrafo con getElementsByTagName

getElementsByTagName: per accedere a elementi e attributi utilizzando il nome del tag. Questo metodo restituirà un file schieramento di tutti gli elementi con lo stesso nome di tag.

Provate voi stessi questo esempio:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>

Poiché getElementsByTagName restituisce una raccolta dinamica, paragraphs[1] fa riferimento al secondo paragrafo del documento e l'aggiornamento di innerHTML sovrascrive immediatamente il suo testo sullo schermo.

Creare e rimuovere elementi con createElement e removeChild

Oltre a modificare ciò che è già presente sulla pagina, il DOM consente di aggiungere nuovi elementi o di rimuovere quelli esistenti:

  • createElement(): crea un nuovo nodo elemento in memoria.
  • appendChild(): collega un nodo come ultimo figlio di un elemento padre.
  • setAttribute(): aggiunge o aggiorna un attributo, come class or href, su un elemento.
  • rimuovereFiglio(): Rimuove un nodo figlio specificato dal suo nodo padre.

L'esempio seguente crea un nuovo elemento di elenco, gli assegna un testo e una classe, lo aggiunge a un elenco esistente e infine rimuove il primo elemento da quello stesso elenco:

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Freshly added item";
newItem.setAttribute("class", "highlight");
list.appendChild(newItem);
list.removeChild(list.firstElementChild);

Il metodo createElement() da solo non visualizza nulla, poiché il nodo risiede ancora solo in memoria. Appare solo quando appendChild(), o un metodo simile come prepend(), lo aggiunge da qualche parte all'interno dell'albero visibile. I browser moderni supportano anche un metodo più breve, node.remove(), che elimina un elemento direttamente senza bisogno di un riferimento al suo genitore, a differenza della vecchia sintassi parent.removeChild(node).

Come gestire gli eventi in JavaCopione

Un evento è qualsiasi azione che il browser può rilevare, come un clic, la pressione di un tasto o il caricamento di una pagina. È possibile aggiungere un gestore di eventi a un elemento specifico in due modi principali.

Collega un gestore con onclick o addEventListener

Il primo approccio, più datato, assegna una funzione direttamente alla proprietà on-event di un elemento:

document.getElementById(id).onclick=function()
{
lines of code to be executed
}

OPPURE, utilizzando il metodo addEventListener(), più moderno e flessibile:

document.getElementById(id).addEventListener("click", functionname)

Il metodo addEventListener() è generalmente preferito perché consente di associare più di un gestore allo stesso evento sullo stesso elemento e accetta un terzo argomento opzionale che controlla la cattura, come descritto più avanti in questa sezione. Si abbina inoltre a removeEventListener(), che rimuove un gestore quando non è più necessario, cosa che la proprietà onclick da sola non può fare.

HTML supporta anche un terzo stile: un gestore in linea scritto direttamente sul tag, come <button onclick="clicked()">Click Me</button>. I gestori inline mescolano markup e logica e diventano rapidamente difficili da mantenere, quindi la maggior parte JavaGli sviluppatori di script li riservano per dimostrazioni rapide e si affidano a addEventListener() per le applicazioni reali.

Provalo: un esempio completo di evento click

Provate voi stessi questo esempio:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>

Facendo clic sul pulsante viene attivata la funzione clicked(), che innesca un JavaFinestra di avviso dello script che conferma l'avvenuta esecuzione del gestore eventi.

L'oggetto evento

Ogni gestore di eventi riceve automaticamente un oggetto evento come primo argomento. Questo oggetto contiene dettagli utili su ciò che è accaduto, tra cui event.target (l'elemento esatto su cui ha avuto origine l'azione), event.type (il nome dell'evento, ad esempio "click") e metodi come event.preventDefault(), che impedisce il comportamento predefinito del browser, come seguire un link o inviare un modulo.

document.getElementById("btnClick").addEventListener("click", function(event) {
console.log("Clicked element: " + event.target.id);
});

Due ulteriori proprietà completano l'oggetto evento: event.currentTarget si riferisce sempre all'elemento a cui è collegato il listener, anche se event.target segnala un elemento figlio annidato, e event.stopPropagation() arresta un evento prima che continui a propagarsi o a catturare altri elementi. Insieme a preventDefault(), questi strumenti offrono a un gestore un controllo preciso su ciò che accade successivamente.

Event BubblAcquisizione, cattura e delega

Quando un evento si attiva su un elemento nidificato, non si ferma lì. Nel spumeggiante fase, l'evento viaggia verso l'alto dall'elemento di destinazione attraverso ogni antenato, fino al documento. Nella cattura fase, che viene eseguita per prima ed è facoltativa, l'evento invece viaggia verso il basso dal documento alla destinazione prima che inizi il bubbling. Pass {capture: true} come terzo argomento di addEventListener() per rimanere in ascolto durante la fase di acquisizione.

Delegazione dell'evento Sfrutta il bubbling: invece di associare un listener separato a ogni elemento figlio, si associa un listener a un elemento padre condiviso e si ispeziona event.target per determinare quale elemento figlio lo ha attivato. Questo utilizza meno memoria e copre automaticamente gli elementi aggiunti alla pagina in seguito.

const list = document.getElementById("myList");
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("You clicked " + event.target.textContent);
  }
});

La delega, insieme al bubbling e al capturing, ti dà un controllo granulare su come DOM ed eventi in JavaLo script si adatta man mano che una pagina diventa più interattiva.

DOMANDE FREQUENTI

No. HTML è il markup statico che un browser analizza, mentre il DOM è l'albero di oggetti in memoria che JavaLo script può essere letto e modificato dopo il caricamento della pagina.

È preferibile utilizzare addEventListener(). Consente di associare più gestori a un singolo evento, supporta la fase di cattura e non sovrascrive un gestore già collegato tramite onclick.

BubblIl trasferimento di un evento dall'elemento di destinazione al documento. La cattura viene eseguita per prima e si muove nella direzione opposta, dal documento verso la destinazione.

Sì. Assistenti come Copilota GitHub può trace perché un gestore non viene mai attivato, individuare le chiamate mancanti a event.stopPropagation() e suggerire modelli di delega per elenchi dinamici.

Sì. Strumenti come ChatGPT e GitHub Copilot può generare snippet per createElement, querySelector e addEventListener a partire da una descrizione in linguaggio naturale, sebbene l'output necessiti comunque di test.

Riassumi questo post con: