Introduzione all'interrogazione del DOM

L'interrogazione del DOM consiste nel selezionare e accedere a elementi specifici nel documento per poterli manipolare o interagire con essi. JavaScript offre diversi metodi per interrogare gli elementi, ognuno con casi d'uso e comportamenti specifici.

GetElementById

getElementById viene utilizzato per selezionare un singolo elemento tramite il suo ID univoco. È uno dei metodi più utilizzati poiché gli ID devono essere unici all'interno del documento.
Caso d'uso: Ideale per selezionare un elemento specifico quando si conosce il suo ID.
Restituisce: Un singolo elemento oppure null se non viene trovato alcun elemento.

// HTML:
<div id="header">Welcome</div>

// JS:
const headerEl = document.getElementById('header');
console.log(headerEl.textContent); // Output: Welcome

GetElementsByClassName

getElementsByClassName seleziona gli elementi tramite il loro nome di classe e restituisce una HTMLCollection live degli elementi.
Caso d'uso: Utile quando è necessario selezionare più elementi con la stessa classe.
Restituisce: Una HTMLCollection live degli elementi corrispondenti, che si aggiorna se il DOM cambia.
Limitazioni: Non è possibile utilizzare direttamente i metodi degli array; è necessario convertire in un array se necessario.

// HTML:
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

// JS:
const textEls = document.getElementsByClassName('text');
console.log(textEls); // Output: HTMLCollection(2) [p.text, p.text]
console.log(textEls[0].textContent); // Output: First paragraph
console.log(textEls[1].textContent); // Output: Second paragraph

GetElementsByTagName

getElementsByTagName seleziona gli elementi in base al loro nome di tag (ad esempio, div, p) e restituisce una HTMLCollection live.
Caso d'uso: Ideale per selezionare tutti gli elementi di un determinato tipo.
Restituisce: Una HTMLCollection live di elementi.
Limitazioni: Poco specifico, poiché seleziona tutti gli elementi di un dato tag all'interno del contesto.

// HTML:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// JS:
const listItems = document.getElementsByTagName('li');
console.log(listItems); // Output: HTMLCollection(2) [li, li]
console.log(listItems.length); // Output: 2

QuerySelector

querySelector seleziona il primo elemento che corrisponde a un selettore CSS. È versatile e consente di utilizzare qualsiasi selettore CSS valido per trovare elementi.
Caso d'uso: Ottimo per selezionare la prima corrispondenza di qualsiasi selettore CSS.
Restituisce: Il primo elemento corrispondente oppure null se non viene trovata alcuna corrispondenza.

// HTML:
<div class="box" id="main-box">Content</div>

// JS:
const boxEl = document.querySelector('.box'); // Selects the first .box element
console.log(boxEl.id); // Output: main-box
console.log(boxEl.className); // Output: box
console.log(boxEl.textContent); // Output: Content

QuerySelectorAll

querySelectorAll seleziona tutti gli elementi che corrispondono a un selettore CSS e restituisce una NodeList statica. A differenza di altri metodi, non si aggiorna dinamicamente se il DOM cambia.
Caso d'uso: Perfetto per selezionare più elementi con selettori complessi.
Restituisce: Una NodeList statica di elementi che non si aggiorna automaticamente.

// HTML:
<p class="content">Paragraph</p>
<span class="content">Text</span>
<div class="content">Container</div>

// JS:
const contentEls = document.querySelectorAll('.content');
console.log(contentEls); // Output: NodeList(3) [p.content, span.content, div.content]
console.log(contentEls.length); // Output: 3

Differenze tra questi metodi

Tipi di ritorno

Collezioni live vs. statiche

Selettori CSS

Prestazioni

Esempio pratico: Validazione di un modulo

Combinazione di questi metodi in uno scenario pratico: evidenziazione dei campi non validi del modulo tramite classi.

Il metodo getElementById seleziona l'elemento form, mentre querySelectorAll recupera tutti i campi di input con la classe .input-field. Un event listener sull'evento "submit" del form impedisce l'invio predefinito e controlla ciascun campo di input. Se un campo è vuoto, viene evidenziato con un bordo rosso, mentre i campi compilati ricevono un bordo verde, fornendo un feedback visivo immediato all'utente.