L'eroe nascosto dei siti web: capire il DOM

"Il DOM" è un termine che viene utilizzato molto nel design e nello sviluppo web front-end. Sta per "Document Object Model" ed è una parte fondamentale dei siti web.

Per quanto importante sia il DOM, molte persone non lo capiscono. In effetti, puoi programmare siti web per anni senza imparare molto al riguardo. Ma con l'avanzare della tecnologia front-end, la comprensione del DOM sta diventando sempre più importante.

Comprensione del contratto DOM

Nella programmazione orientata agli oggetti, esiste un costrutto chiamato interfaccia. Un'interfaccia non fa nulla da sola. Invece, crea un contratto. Dice che qualsiasi cosa può interagire con qualsiasi altra cosa, purché segua le regole del contratto di interfaccia.

Avere un'interfaccia consente a qualsiasi parte di un programma di interagire con qualsiasi altra parte del programma in modo controllato e prevedibile. L'interfaccia consente anche a una parte di un programma di lavorare con qualsiasi altra parte, anche se non sa nulla della parte del programma sull'altro lato dell'interfaccia.

Un'interfaccia è come una presa elettrica nel muro. Il tuo dispositivo non ha bisogno di sapere da dove proviene l'alimentazione fintanto che la tensione è corretta. Il trasformatore all'angolo non ha bisogno di sapere cosa sta alimentando. Ha solo bisogno di inviare elettricità alla giusta tensione a casa tua.

Il DOM è un livello di interfaccia tra la pagina web e il codice che la crea e la modifica. Quando visiti un sito web, vedi come il browser esegue il rendering del DOM di quel sito web. Quando scrivi HTML, stai effettivamente programmando utilizzando l'API (interfaccia di programmazione) del DOM.

Lo standard DOM è gestito da un'organizzazione chiamata il World Wide Web Consortiumo W3C. Hanno creato documentazione molto dettagliata che definisce il DOM standard.

A questo punto, potresti pensare che non stanno facendo un ottimo lavoro. Dopotutto, ci sono così tanti problemi causati da problemi di compatibilità tra browser.

Il problema non è con lo standard. È con i browser stessi. Molti browser hanno aggiunto funzionalità alla loro implementazione DOM che non sono conformi agli standard W3C. A volte questa funzionalità diventa popolare e viene implementata nello standard DOM, costringendo altri browser a recuperare il ritardo.

Un altro problema è che alcune persone utilizzano ancora versioni precedenti di browser che non dispongono dell'ultimo standard DOM integrato. E a volte i browser non implementano lo standard correttamente.

Come è strutturato il DOM

Puoi pensare al DOM come un albero. Il l'elemento è il tronco e tutti gli elementi al suo interno sono rami. Quando annidi elementi HTML all'interno di un elemento genitore, stai effettivamente creando rami al di fuori di quel ramo. Il termine corretto per ogni ramo è "nodo".

La struttura ad albero crea relazioni logiche tra i nodi, come un albero genealogico. Ogni nodo può avere un genitore e antenati da cui si dirama. Possono avere fratelli. E i nodi possono avere figli e discendenti. Pensare in questi termini aiuta molto quando si utilizzano JavaScript e CSS per interagire con il DOM.

Come HTML interagisce con il DOM

Il DOM viene definito creando un oggetto documento con l'interfaccia del documento. Il tuo codice HTML è il modo più diretto per creare un documento. L'HTML offre un modo semplice per definire il documento senza la necessità di eseguire la programmazione tradizionale.

Se hai appena iniziato con l'HTML, ecco qui cinque suggerimenti per familiarizzare con esso.

5 passaggi per comprendere il codice HTML di base

L'HTML è la spina dorsale di ogni pagina web. Se sei un principiante, lascia che ti guidiamo attraverso i passaggi di base per comprendere l'HTML.

L'HTML è più semplice e indulgente rispetto ai linguaggi di programmazione tradizionali. Rende l'interazione con il DOM facile per i web designer principianti.

Come i CSS interagiscono con il DOM

Una volta che il tuo HTML ha strutturato il documento DOM, CSS può applicare uno stile a quel documento. Per fare ciò, deve essere in grado di trovare gli elementi che desideri modellare. Lo fa in alcuni modi.

Puoi accedere ai nodi del documento facendo riferimento agli elementi per nome, come e. I CSS possono anche accedere agli elementi direttamente facendo riferimento classe e id nomi. Lo stile di classe viene applicato a diversi elementi in modo da poterli applicare contemporaneamente. Al contrario, lo stile dell'ID applica le modifiche solo a un singolo elemento.

Puoi anche accedere alla struttura dell'albero genealogico con CSS e perfezionare l'accesso per un maggiore controllo. I selettori CSS ti consentono di scegliere più elementi e ti offrono un sacco di trucchi per trovarli. Puoi cercare i bambini in base alla loro origine, combinazioni di classi e molto altro.

Come JavaScript interagisce con il DOM

JavaScript ha il maggior controllo sul documento perché JavaScript è un vero linguaggio di programmazione con oggetti, controllo di flusso, variabili, ecc. Il DOM fornisce diverse interfacce che consentono a JavaScript di manipolare il documento, gli elementi e altri nodi.

Relazionato: Che cos'è JavaScript?

JavaScript può aggiungere e rimuovere nodi e modificarne lo stile. E JavaScript può controllare gli eventi nel documento, come passare il mouse su un elemento, fare clic e premere i tasti.

JavaScript può cercare e navigare nell'albero del documento in modo molto simile a CSS. È in grado di trovare elementi per ID e classe. E può recuperare elenchi di elementi figlio come array.

Il futuro dello sviluppo web e del DOM

Internet è cambiato molto dai primi giorni. All'inizio, JavaScript veniva utilizzato principalmente per effetti speciali e semplici visualizzazioni di dati. La maggior parte dei siti web non erano molto più che opuscoli digitali. AJAX ha cambiato tutto questo, però.

AJAX consente ai siti Web di aggiornare al volo i dati visualizzati da un server senza ricaricare la pagina. Prima di AJAX, ogni modifica ai dati poteva essere visualizzata solo quando la pagina veniva ricaricata o l'utente navigava su un'altra pagina.

Dopo AJAX, le app web sono diventate sempre più popolari. Internet non è più una raccolta di semplici siti Web statici e alcune app ad alta funzionalità, come eBay. Ora Internet è quasi un secondo sistema operativo, pieno di app altamente funzionali.

Man mano che le aspettative degli utenti crescono, la tecnologia deve tenere il passo. JavaScript non è il linguaggio più potente o più veloce. Soffre anche di una manciata di problemi come errori di numeri in virgola mobile che lo rendono meno desiderabile per gli sviluppatori. È qui che entra in gioco WebAssembly.

WebAssembly offre molti dei vantaggi del codice nativo al browser, inclusa una maggiore velocità e un migliore accesso all'hardware. Permetterà ai programmatori di utilizzare altri linguaggi per creare siti web come C ++ e Rust.

Ma anche con i grandi miglioramenti che porterà WebAssembly, il DOM sarà ancora lì, fornendo un'interfaccia coerente tra il codice e ciò che viene visualizzato nel browser.

Come utilizzare Outlook in modalità oscura

Riduci l'affaticamento degli occhi e aumenta la durata della batteria passando Microsoft Outlook alla modalità Scuro.

Circa l'autore