Il Document Object Model (DOM) è un’interfaccia di programmazione per documenti HTML e XML creata dal browser una volta che il documento è stato caricato. Una pagina web è essenzialmente un documento rappresentato dal DOM come nodi e oggetti. Permette ai programmi di manipolare il contenuto, la struttura e gli stili del documento.
In questo tutorial, impareremo come usare JavaScript per accedere a diversi nodi (elementi HTML) nel DOM. Iniziamo con il primo metodo: ottenere l’elemento per ID.
Get Element By ID
Il metodo document di getElementById() prende l’ID dell’elemento come input e ritorna un oggetto Element che rappresenta l’elemento DOM. Ecco un esempio:
<div>🦄</div>Ecco come possiamo ottenere il suddetto elemento <div> usando il suo ID:
const unicorn = document.getElementById('unicorn');L’ID è sensibile alle maiuscole e unico in tutto il documento HTML. Quindi questo metodo restituisce sempre un singolo elemento. Se non viene trovato nessun elemento corrispondente, restituisce null.
Nota: Non mettere il segno
#prima della stringa ID mentre si chiama il metodogetElementById(). Otterretenullinvece dell’elemento, e poi potreste chiedervi per ore cosa è andato storto.
Ottieni elementi per nome del tag
Il metodo getElementsByTagName() è usato per accedere a più elementi. Prende il nome del tag come input e restituisce tutti gli elementi DOM che corrispondono al nome del tag come HTMLCollection:
<p>🐱</p><p>🐰</p><p>🐯</p><p>🐧</p>Codice JavaScript per accedere a tutti gli elementi <p>:
const animals = document.getElementsByTagName('p');Questo metodo cerca solo un nome di tag alla volta. Ma se passate * come nome del tag, otterrete tutti gli elementi nel DOM:
const allNodes = document.getElementsByTagName('*');Ottieni elementi per nome
Il metodo getElementsByName() è usato per ottenere una collezione di elementi in base al loro attributo name, e restituisce un oggetto NodeList:
<input type="text" name="email"><input type="tel" name="phone"><input type="date" name="dob">otteniamo tutti gli elementi con il nome email:
const emails = document.getElementsByName('email');Nota: A differenza dell’attributo
id, che deve essere unico, più elementi HTML possono avere lo stesso attributoname. Ecco perchégetElementsByName()restituisce una collezione di nodi.
Ottieni elementi per nome di classe
Vuoi usare l’attributo class per ottenere una lista di elementi corrispondenti? Potete usare il metodo getElementsByClassName(), basta passargli un nome di classe (senza .) e restituirà un HTMLCollection di tutti gli elementi DOM che hanno il nome della classe data:
<div class="bird owl">🦉</div><div class="bird">🐦</div><div class="bird eagle">🦅</div><div class="animal cat">🐱</div>otteniamo tutti i bird:
const birds = document.getElementsByClassName('bird');Questo metodo accetta anche nomi di classi multiple separate da spazi. Otteniamo tutti gli elementi che hanno entrambe le classi bird e eagle:
const eagle = document.getElementsByClassName('bird eagle');Query Selector
Il metodo querySelector() è uno dei due moderni metodi JavaScript che permettono di ottenere elementi dal DOM, basati su selettori CSS. Basta passare il selettore CSS per ottenere il primo elemento che corrisponde al selettore specificato. Se non esiste alcuna corrispondenza, restituisce null. Ecco un esempio:
const email = document.querySelector('#signup input');Query Selector All
Vuoi selezionare una lista di elementi che corrispondono ai selettori specificati? Usa invece il metodo querySelectorAll(). Questo metodo prende più selettori CSS come input e restituisce una NodeList – una lista di elementi DOM che corrispondono ai selettori dati. Selezioniamo tutti gli elementi con una classe bird o animal dal markup HTML di cui sopra:
const elems = document.querySelectorAll('.bird, .animal');console.log(elems.length); // 4Function Chaining
Puoi anche concatenare più funzioni per cercare elementi all’interno di un altro elemento. Dovete prima selezionare un singolo elemento usando getElementById() o querySelector(), e poi concatenare un’altra funzione per cercare all’interno:
<form> <input type="text" name="email"> <input type="tel" name="phone"> <input type="date" name="date-of-birth"></form>Ottieni tutti gli elementi input, dentro un elemento che ha l’ID signup:
const inputs = document.getElementById('signup').getElementsByTagName('input');// ORconst inputs = document.querySelector('#signup').querySelectorAll('input');Traversing HTMLCollection e NodeList
La maggior parte dei metodi che abbiamo discusso sopra (tranne getElementById() e querySelector()) restituisce più elementi come un HTMLCollection o un NodeList.
Il HTMLCollection non è un array ma una collezione generica di elementi. Quindi non è possibile iterare su di esso con forEach() o map(). Tuttavia, possiamo convertirlo in un vero array e poi iterare usando il metodo Array.from():
const inputs = document.getElementById('signup').getElementsByTagName('input');// iterate over HTMLCollectionArray.from(inputs).forEach(element => { console.log(element);});Anche se NodeList non è un array, ma fornisce il metodo forEach() per iterare sugli elementi:
const inputs = document.querySelector('#signup').querySelectorAll('input');//iterate over NodeListinputs.forEach(element => { console.log(element);});Conclusione
Questo è tutto per ottenere elementi DOM usando JavaScript. Abbiamo imparato tanti metodi diversi per accedere agli elementi del DOM: usando l’attributo id, il nome del tag HTML, l’attributo name, l’attributo class e i selettori CSS. Abbiamo anche discusso i modi per iterare sulla collezione generica di elementi restituiti da questi metodi.
✌️ Ti piace questo articolo? Segui @attacomsian su Twitter. Puoi seguirmi anche su LinkedIn e DEV. Iscriviti al feed RSS.
👋 Se ti piace leggere i miei articoli e vuoi supportarmi per continuare a creare tutorial gratuiti, ☕ Comprami un caffè (costo $5) .