Il Document Object Model (DOM) è la rappresentazione strutturale di un documento HTML. Il DOM è un albero di nodi che il browser crea per ogni pagina web su Internet.

Il DOM è orientato agli oggetti. Ogni elemento nel DOM ha il proprio set di attributi e metodi a cui puoi accedere utilizzando JavaScript.

In questo articolo tutorial imparerai come utilizzare le funzioni del selettore DOM per accedere agli elementi di una pagina web.

Come accedere agli elementi DOM

È possibile accedere all'elemento DOM di livello superiore di una pagina Web tramite l'oggetto documento globale. Ad esempio, se hai una pagina web come la seguente:

Ben arrivato


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Di


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Articoli



Titolo dell'articolo uno


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Per saperne di più 





Titolo dell'articolo due


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Per saperne di più 





Titolo dell'articolo tre


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Per saperne di più 





Articolo Titolo Quarto


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Per saperne di più 

Digitando documento nella console del browser e premendo invio verrà prodotto il seguente output:

L'output nella tua console è interattivo. Puoi fare clic su testa e corpo elementi per ampliarli. In questo modo verrà prodotto il seguente output:

Ogni elemento della sezione nel tag è anche espandibile. A seconda della struttura di una pagina web, gli elementi continueranno ad espandersi per rivelare più elementi. Questo dovrebbe darti una comprensione più chiara della struttura del DOM.

Imparentato: L'eroe nascosto dei siti web: Capire il DOM

L'oggetto documento ha una proprietà speciale, corpo, che rappresenta l'elemento del corpo. Quindi, per accedere all'elemento body puoi digitare quanto segue nella console:

document.body

Questo produrrà il seguente output:

Ma questo è il massimo possibile utilizzando le proprietà dell'oggetto. Ogni pagina ha una testa e un corpo, ma per il resto è unica. quindi digitando documento.corpo.sezione o qualcosa di simile semplicemente non funzionerà come potresti desiderare. Esistono invece metodi che è possibile chiamare sull'oggetto documento per accedere a elementi specifici.

Cosa sono i selettori di elementi DOM?

I selettori di elementi DOM sono un gruppo di metodi JavaScript che puoi utilizzare sull'oggetto documento per accedere agli elementi in una pagina web. I selettori di elementi DOM hanno due categorie: selettori singoli e multipli.

Queste funzioni agiscono in modo simile ai selettori CSS. Consentono di recuperare elementi in base al nome del tag o agli attributi id e classe. Puoi persino recuperare elementi utilizzando qualsiasi selettore CSS.

Imparentato: Come scegliere come target parte di una pagina Web utilizzando i selettori CSS

I selettori dei singoli elementi sono:

• getElementById()
• querySelector()

I selettori di elementi multipli sono:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

Il selettore di elementi DOM che utilizzi dipenderà dagli elementi a cui stai tentando di accedere.

Utilizzo dei selettori di elementi DOM singoli

Vedrai principalmente i selettori all'interno delle applicazioni JavaScript. Quindi, allontaniamoci dalla console. Crea un file JavaScript e collegalo al tuo file HTML utilizzando il seguente tag di script:

Dove il valore src è il nome del tuo file JavaScript. Posiziona questo tag di script appena prima del tag di chiusura del corpo, .

Il getElementById() Il metodo fornisce l'accesso a un singolo elemento su una pagina web utilizzando il valore del suo ID. Nel documento HTML sopra ci sono diversi elementi con ID. Per prendere di mira il div elemento con l'ID "articolo-3" puoi aggiungere il seguente codice al tuo file JavaScript:

valore = document.getElementById('articolo-3')

Ora l'elemento div con il articolo-3 ID e tutte le sue proprietà corrispondenti sono accessibili da valore variabile. Puoi stampare il valore variabile alla console utilizzando la seguente riga di codice:

console.log (valore)

Vedrai il nome della classe assegnato all'elemento div e altri attributi importanti, come l'HTML interno.

L'altro selettore di elementi singoli è il querySelector(). Questa funzione è più versatile, poiché puoi passarle qualsiasi stringa di selezione CSS. Tuttavia, puoi ancora usarlo solo per selezionare un elemento alla volta.

Ad esempio, c'è una singola classe nel layout HTML sopra: gli articoli. Quattro elementi div usano questa classe, ma il querySelector() la funzione restituirà solo il primo elemento che ha la classe "articles".

Utilizzo di querySelector() con una classe

Aggiungi il seguente codice alla fine dello script:

value = document.querySelector('.articles')
console.log (valore)

Questo restituirà solo il primo div elemento con una classe "articoli". Notare che si specifica il selettore nello stesso formato di un selettore CSS. Nei CSS, un punto iniziale specifica il nome di una classe.

Utilizzo di querySelector() con un ID

value = document.querySelector('#articolo-3')
console.log (valore)

Questo codice restituirà l'unico elemento con un ID "articolo-3", il terzo div elemento con una classe "articoli". Di nuovo, la stringa di selezione utilizza la sintassi CSS standard, con a # simbolo che specifica un ID.

Utilizzo di più selettori di elementi DOM

Le restanti funzioni di selezione recuperano gruppi di elementi. Sono getElementsByTagName(), getElementsByClassName(), e querySelectorAll().

Utilizzo di getElementsByTagName()

Il getElementsByTagName() selector recupera un gruppo di elementi con lo stesso nome di tag. Ad esempio, se si desidera selezionare tutti i h2 elementi in una pagina Web, è possibile utilizzare il seguente codice:

valore = document.getElementsByTagName('h2')
console.log (valore)

Questo memorizza tutti gli elementi h2 in una raccolta HTML chiamata value.

Utilizzo di getElementsByClassName()

Il getElementsByClassName() selector restituisce una raccolta di elementi con lo stesso nome di classe.

value = document.getElementsByClassName('articles')
console.log (valore)

L'inserimento del codice sopra nel tuo file JavaScript restituirà i quattro elementi div con il nome della classe "articles" nella console del browser.

Utilizzo di querySelectorAll()

Il querySelectorAll() Il metodo restituisce un elenco di nodi di tutti gli elementi che corrispondono al selettore specificato. Per accedere a tutti gli elementi del paragrafo nella sezione blog, puoi utilizzare il seguente codice:

value = document.querySelectorAll('#blog p')
console.log (valore)

Puoi anche includere diversi selettori nella stringa, separandoli con una virgola, proprio come nei CSS:

valore = document.querySelectorAll('h2, .articles')
console.log (valore)

Usa i selettori DOM per creare pagine Web dinamiche

A questo punto, dovresti avere una chiara comprensione del DOM e di come funziona. Dovresti anche conoscere i diversi selettori singoli e multipli e come usarli.

Tuttavia, ottenere l'accesso agli elementi HTML è solo il primo passo in ciò che puoi fare con i selettori DOM. I selettori DOM ti aiuteranno a sviluppare gli aspetti funzionali del tuo sito web, come la gestione degli eventi onclick e onscroll.

Come rendere il tuo sito web reattivo e interattivo con CSS e JavaScript

Hai impostato il tuo sito web con HTML e CSS, ma ora devi aggiungere la logica. Ecco cosa fare.

Leggi Avanti

Circa l'autore