Comprendere Document Object Model (DOM) in Dettagli

Abbiamo tutti sentito parlare di DOM, o Modello oggetto documento, che viene menzionato di volta in volta, relativo a JavaScript. DOM è un concetto piuttosto importante nello sviluppo web. Senza di esso, non saremmo in grado di modifica dinamicamente le pagine HTML nel browser.

Imparare e comprendere i risultati del DOM in modi migliori di accesso, modifica e monitoraggio diversi elementi di una pagina HTML. Il Document Object Model può anche aiutarci ridurre gli aumenti non necessari nel tempo di esecuzione dello script.

Alberi della struttura dei dati

Prima di parlare di cos'è il DOM, di come nasce, di come esiste e di cosa accade al suo interno, voglio che tu sappia degli alberi. Non il tipo conifero e deciduo ma circa il struttura della struttura dei dati.

È molto più semplice comprendere il concetto di strutture dati se semplifichiamo la sua definizione. Direi che è una struttura dati organizzare i tuoi dati. Sì, è solo un vecchio arrangiamento, come faresti per sistemare i mobili di casa tua oi libri in una libreria o tutti i diversi gruppi di alimenti che stai consumando nel tuo piatto per rendilo significativo per te.

Naturalmente, non è tutto quello che c'è in una struttura dati, ma è praticamente tutto da dove tutto inizia. Questo “preparativi” è al centro di tutto. È piuttosto importante anche nel DOM. Ma non stiamo ancora parlando di DOM, quindi lascia che ti diriga verso a struttura dei dati che potresti conoscere: array.

Matrici e alberi

Array hanno indici e lunghezza, possono essere multidimensionale, e hanno molte più caratteristiche. Per quanto sia importante sapere queste cose sugli array, non preoccupiamoci di questo in questo momento. Per noi, un array è piuttosto semplice. È quando tu sistemare cose diverse in fila.

Allo stesso modo, quando si pensa agli alberi, diciamo, si tratta di mettere le cose al di sotto di un altro, iniziando con una sola cosa in alto.

Ora potresti prendere le anatre a linea singola di prima, giralo dritto, e dimmelo “ora, ogni anatra è sotto un'altra anatra”. Allora è un albero? È.

A seconda di quali sono i tuoi dati o di come li utilizzerai, i dati più in alto nella tua struttura (chiamati radice) potrebbe essere qualcosa che è di grande importanza o qualcosa che è lì solo per racchiudi altri elementi al di sotto di esso.

In entrambi i casi, l'elemento più in alto in una struttura dati ad albero fa qualcosa di molto importante. Fornisce un posto a inizia a cercare qualsiasi informazione che vogliamo estrarre dall'albero.

Il significato di DOM

DOM sta per Modello oggetto documento. Il documento punta a un documento HTML (XML) che è rappresentato come un oggetto. (In JavaScript tutto può sempre essere rappresentato solo come un oggetto!)

Il modello è creato dal browser che accetta un documento HTML e crea un oggetto che lo rappresenta. Possiamo accedere a questo oggetto con JavaScript. E poiché usiamo questo oggetto per manipolare il documento HTML e creare le nostre applicazioni, DOM è fondamentalmente un API.

L'albero DOM

Nel codice JavaScript, il documento HTML è rappresentato come un oggetto. Tutti i dati letti da quel documento sono anche salvato come oggetti, annidati l'uno sotto l'altro (perché come ho detto prima, in JavaScript tutto può sempre essere rappresentato solo come oggetti).

Quindi, questo è fondamentalmente la disposizione fisica dei dati DOM nel codice: tutto è sistemato come oggetti. Logicamente, comunque, è un albero.

Il parser DOM

Ogni software del browser ha un programma chiamato DOM Parser è responsabile di analizzando un documento HTML in DOM.

I browser leggono una pagina HTML e trasformano i suoi dati in oggetti che costituiscono il DOM. Le informazioni presenti in questi oggetti DOM JavaScript sono organizzate in modo logico come struttura della struttura dati nota come albero DOM.

Analisi dei dati da HTML nell'albero DOM

Prendi un semplice file HTML. Ha il elemento radice . Suo sottoelementi siamo e , ognuno ha molti elementi figlio propri.

Quindi essenzialmente, il browser legge i dati nel documento HTML, qualcosa di simile a questo:

E, li organizza in un albero DOM come questo:

La rappresentazione di ciascun elemento HTML (e il suo contenuto di appartenenza) nell'albero DOM è nota come a Nodo. Il nodo radice è il nodo di .

Il Interfaccia DOM in JavaScript è chiamato documento (poiché è la rappresentazione del documento HTML). Quindi, accediamo all'albero DOM di un documento HTML tramite la documento interfaccia in JavaScript.

Non possiamo solo accedere, ma anche manipolare il documento HTML attraverso il DOM. Possiamo aggiungere elementi a una pagina Web, rimuoverli e aggiornarli. Ogni volta che cambiamo o aggiorniamo i nodi nell'albero DOM, questo riflette sulla pagina web.

Come sono progettati i nodi

Ho accennato prima che ogni pezzo di dati da un documento HTML è salvato come oggetto in JavaScript. Quindi, come i dati salvati come oggetto possono essere disposti logicamente come un albero?

I nodi di un albero DOM hanno determinate caratteristiche o proprietà. Quasi ogni nodo in un albero ha un nodo genitore (il nodo proprio sopra di esso), nodi figli (i nodi sotto di esso) e fratelli (altri nodi appartenenti allo stesso genitore). Avere questo famiglia sopra, sotto e intorno a un nodo è ciò che lo qualifica come a parte di un albero.

Questa informazione di famiglia di ogni nodo è salvato come proprietà nell'oggetto che rappresenta quel nodo. Per esempio, bambini è una proprietà di un nodo che trasporta un elenco di elementi figlio di quel nodo, quindi organizzando in modo logico i suoi elementi figli sotto il nodo.

Evita di esagerare con la manipolazione DOM

Per quanto possiamo trovare utile l'aggiornamento del DOM (per modificare una pagina web), esiste una cosa del genere esagerare.

Di ', vuoi aggiornare il colore di a

su una pagina web utilizzando JavaScript. Quello che devi fare è accedendo al relativo oggetto nodo DOM corrispondente e aggiorna la proprietà del colore. Questo non dovrebbe influenzare il resto dell'albero (gli altri nodi nell'albero).

Ma, cosa succede se lo si desidera rimuovi un nodo da un albero o aggiungerne uno? L'intero albero potrebbe dover essere riorganizzato, con il nodo rimosso o aggiunto all'albero. Questo è un lavoro costoso. Ci vuole tempo e risorse del browser per portare a termine questo lavoro.

Per esempio, diciamo, tu vuoi aggiungi cinque righe extra a un tavolo. Per ogni riga, quando i suoi nuovi nodi vengono creati e aggiunti al DOM, il albero viene aggiornato ogni volta, aggiungendo fino a cinque aggiornamenti in totale.

Possiamo evitarlo usando il DocumentFragment interfaccia. Pensala come una scatola che potrebbe tenere tutte e cinque le righe ed essere aggiunto all'albero. In questo modo sono le cinque file aggiunto come un singolo pezzo di dati e non uno a uno, portando ad un solo aggiornamento nell'albero.

Questo non accade solo quando rimuoviamo o aggiungiamo elementi, ma ridimensionamento di un elemento può anche influenzare altri nodi, poiché l'elemento ridimensionato potrebbe aver bisogno di altri elementi intorno a esso aggiusta le loro dimensioni. Quindi, i nodi corrispondenti di tutti gli altri elementi dovranno essere aggiornati e gli elementi HTML saranno resi di nuovo secondo le nuove regole.

Allo stesso modo, quando viene influenzato il layout di una pagina web nel suo complesso, una parte o l'intera pagina web potrebbero essere rieseguiti. Questo processo è noto come riflusso. In modo da evitare un riflusso eccessivo assicurati di non modificare troppo il DOM. Le modifiche al DOM non sono l'unica cosa che può causare Reflow su una pagina web. A seconda del browser, anche altri fattori possono contribuire ad esso.

Avvolgendo

Avvolgendo le cose, il DOM è visualizzato come un albero composto da tutti gli elementi trovati in un documento HTML. Fisicamente (fisico come tutto ciò che può ottenere il digitale), è a set di oggetti JavaScript nidificati di quali proprietà e metodi posseggono le informazioni che rendono possibile sistemali logicamente in un albero.