JavaScript - Collectioni DOM

Ciao a tutti, aspiranti programmatori! Oggi esploreremo il mondo affascinante delle Collectioni DOM in JavaScript. Non preoccupatevi se siete nuovi alla programmazione - vi guiderò in questo viaggio passo dopo passo, proprio come ho fatto per centinaia di studenti negli anni della mia insegnanza. Allora, prendete una tazza di caffè (o la vostra bevanda preferita) e iniziamo!

L'oggetto HTMLCollection

Immaginate di essere in una biblioteca e di voler trovare tutti i libri su JavaScript. La bibliotecaria vi dà un carrello speciale che contiene tutti questi libri. Nel mondo dello sviluppo web, questo carrello è come un'HTMLCollection - una collezione di elementi HTML con cui possiamo lavorare utilizzando JavaScript.

Cos'è un HTMLCollection?

Un HTMLCollection è un oggetto simile a una lista che rappresenta una collezione di elementi HTML su una pagina web. È "vivo", il che significa che si aggiorna automaticamente quando il documento sottostante cambia.

Guardiamo un esempio semplice:

<div class="book">JavaScript Basics</div>
<div class="book">Advanced JavaScript</div>
<div class="book">DOM Manipulation</div>

<script>
let books = document.getElementsByClassName('book');
console.log(books);
console.log(books.length); // Output: 3
</script>

In questo esempio, books è un'HTMLCollection che contiene tutti gli elementi con la classe "book". La proprietà length ci dice quanti elementi ci sono nella collezione.

Accedere agli elementi in un'HTMLCollection

Potete accedere agli elementi in un'HTMLCollection proprio come fareste con un array:

console.log(books[0].innerText); // Output: "JavaScript Basics"
console.log(books[1].innerText); // Output: "Advanced JavaScript"
console.log(books[2].innerText); // Output: "DOM Manipulation"

Tuttavia, ricorda che un'HTMLCollection non è esattamente un array. È simile a un array, ma non ha tutti i metodi che gli array hanno.

Iterare attraverso un'HTMLCollection

Per iterare su tutti gli elementi in un'HTMLCollection, puoi usare un ciclo for:

for (let i = 0; i < books.length; i++) {
console.log(books[i].innerText);
}

Oppure, se preferisci un approccio più moderno, puoi convertire l'HTMLCollection in un array e usare metodi array:

Array.from(books).forEach(book => {
console.log(book.innerText);
});

Collections di oggetti document e elementi DOM

Ora che comprendiamo HTMLCollection, esploriamo alcuni modi comuni per creare collectioni di elementi DOM.

document.getElementsByTagName()

Questo metodo restituisce un'HTMLCollection di elementi con il nome di tag specificato.

<p>Primo paragrafo</p>
<p>Secondo paragrafo</p>
<p>Terzo paragrafo</p>

<script>
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Output: 3

for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
</script>

document.getElementsByClassName()

L'abbiamo visto prima, ma approfondiamo un po':

<div class="fruit">Mela</div>
<div class="fruit">Banana</div>
<div class="fruit">Arancia</div>

<script>
let fruits = document.getElementsByClassName('fruit');
console.log(fruits.length); // Output: 3

Array.from(fruits).forEach(fruit => {
console.log(fruit.innerText);
});
</script>

document.querySelectorAll()

Questo potente metodo restituisce un NodeList (simile a un'HTMLCollection) di tutti gli elementi che corrispondono a un selettore CSS:

<ul>
<li class="item">Elemento 1</li>
<li class="item">Elemento 2</li>
<li class="item">Elemento 3</li>
</ul>

<script>
let items = document.querySelectorAll('ul .item');
console.log(items.length); // Output: 3

items.forEach(item => {
console.log(item.innerText);
});
</script>

Notate che diversamente da HTMLCollection, il NodeList restituito da querySelectorAll() non è vivo e ha un metodo forEach integrato.

Confronto dei metodi di collectione

Ecco una tabella utile che riassume i metodi di collectione discussi:

Metodo	Restituisce	Vivo?	Caso d'uso
getElementsByTagName()	HTMLCollection	Sì	Quando hai bisogno di elementi di un tag specifico
getElementsByClassName()	HTMLCollection	Sì	Quando hai bisogno di elementi con una classe specifica
querySelectorAll()	NodeList	No	Quando hai bisogno di elementi che corrispondono a un selettore CSS

Ricorda, "vivo" significa che la collectione si aggiorna automaticamente quando il DOM cambia.

Conclusione

Eccoci, cari studenti! Abbiamo viaggiato attraverso il territorio delle Collectioni DOM, da HTMLCollection ai vari metodi di raccolta di elementi DOM. Questi strumenti sono fondamentali per manipolare le pagine web con JavaScript, permettendovi di selezionare e modificare elementi con facilità.

Mentre praticherete con questi concetti, vi troverete sempre più a vostro agio con la manipolazione del DOM. È come imparare a suonare uno strumento musicale - all'inizio potrebbe sembrare difficile, ma con la pratica, creareте bellissime sinfonie web in un batter d'occhio!

Ricorda, la chiave per padroneggiare la programmazione è la pratica e la curiosità. Non abbiate paura di sperimentare con questi metodi, provate diversi scenari e, soprattutto, divertitevi a programmare!

Finché a dopo, happy coding!

Credits: Image by storyset