Finora abbiamo parlato del motivo per cui la denominazione dominante è eccitante.
Perché dovresti preoccuparti.
I diversi siti che usano le infinite possibilità dei giochi tutte le cose eccitanti.
Ma non abbiamo ancora parlato di cosa sia realmente il DOM.
Quindi lo faremo in questo video per iniziare definiamolo.
Dio sono.
Dom sta per Modello oggetto documento.
Il significato di queste tre parole avrà un po 'più senso nelle prossime diapositive.
Ma iniziamo definendolo ad un livello più alto.
Dom è l'interfaccia tra il tuo javascript e la tua età.
Tim Mounty SS È fondamentalmente un mucchio di speciali oggetti javascript, funzioni di metodi javascript che possiamo usare per interagire
con il nostro H. M. S. valutare possiamo cambiare le cose possiamo aggiungere elementi rimuovere elementi cambiare i
colori animare ogni sorta di modi eccitanti di interagire con il loro H. M. S. valutare.
In questa diapositiva parlo un po 'di come viene costruito il DOM e del perché si chiama
il modello di oggetto del documento.
tag con il mio link come testo e un H-1 con la mia intestazione come testo e questo è esso.
Quindi quando carichiamo una pagina di posta elettronica, questa sembra in un browser ed è solo un po 'semplice da escludere, quindi hai un
titolo e un
Quindi quando apro questo nel browser vedo questo, ma dietro le quinte viene creato il DOM.
È costruito da questo qui.
Quindi quello che voglio dire è che questa età Tim è trasformata in un mucchio di oggetti javascript.
Ogni oggetto modella uno di questi elementi.
Ecco dove otteniamo la parte del modello a oggetti del modello a oggetti del documento.
ancora una volta, per reiterare caricando ogni squadra nel browser, il browser ci mostra cose come questa.
Quindi,
Ma dietro le quinte rende in realtà questo modello di ogni singolo elemento con un oggetto javascript proprio
come abbiamo modellato il mio cane Rusty usando un oggetto javascript.
Aveva un nome di proprietà e un altro razza ed età.
Questi oggetti sono fondamentalmente la stessa cosa tranne che il contenuto è diverso.
Avranno cose come il tipo di tag, l'origine del testo, il testo, lo sfondo, il colore, il testo, le dimensioni,
tutte le diverse proprietà che sono contenute all'interno di ogni oggetto.
Trascorreremo molto tempo a lavorare con questi oggetti, quindi le specifiche non sono importanti.
Tutto ciò che voglio sottolineare qui è che carichiamo ogni tim L. Viene visualizzato nel browser e il browser
acquisisce quel Tim L e prende ciascun elemento e lo trasforma in un oggetto.
In modo che copre la parte del modello oggetto.
Che dire del documento.
Quindi puoi vedere qui questo è
un piccolo diagramma del tipo di struttura che otteniamo dal DOM l'oggetto di livello superiore che tutto è contenuto all'interno del nostro intero modello di H. T. chi ci monta è chiamato
il documento.
Quindi possiamo andare a qualsiasi pagina web.
Quindi ho Google aperto e sto solo andando a digitare il con. La parola documento.
E quando lo faccio ottengo questa grande cosa che ritorna a questo grande oggetto.
Tranne che non sembra un oggetto javascript.
Non è proprio quello che ci aspetteremmo.
Questo perché il browser lo sta nascondendo da me.
Ciò che in realtà mi sta mostrando è
che la posta HQ assomiglia al testo ma non mi mostra gli oggetti reali che sono modellati su questo Timo.
sull'oggetto console e cancelleremo quel D.
Quindi per ottenerlo dobbiamo usare cancel dot DI R che è un altro metodo IO. R. documentare tutto ciò che questo farà è stampare l'intero oggetto del documento nella sintassi di questo oggetto
che ci è familiare.
Quindi puoi vedere che è solo un oggetto normale,
proprio come quelli che abbiamo scritto da soli, proprio come Rusty, l'oggetto cane, eccetto che qui ci sono molte più informazioni.
Quindi abbiamo cose come i collegamenti di
font o immagini, ma abbiamo anche cose come il corpo e questo corpo rappresenta l'intero corpo.
Quindi ogni elemento che vedi qui è all'interno del corpo.
proprietà, inclusa una chiamata Nodi del bambino.
Quindi, se apro il corpo, vedrai che abbiamo un sacco di altre
Quindi i nodi figli
ci mostrano che c'è un div c'è un tag script e c'è un altro div all'interno del corpo.
E se andassimo agli elementi lo vedremmo.
Quindi ecco il corpo dentro il corpo.
Abbiamo quel primo div abbiamo un tag script e abbiamo il secondo div.
E poi, che cosa diciamo di aprire quel terzo
div, ci aspetteremmo di vedere altre due div all'interno di quel secondo div.
E se
andiamo al console e guardiamo il secondo div e poi guardiamo ai nodi figli vediamo OK ci sono altre due div così come puoi vedere il dom diventa davvero enorme davvero veloce.
Esistono centinaia e centinaia di proprietà e metodi e nodi
diversi e tutta questa struttura pazzesca di oggetti nidificati.
Sono solo tante cose.
È una di quelle volte che
ho menzionato all'inizio di questa lezione in cui dovrai stare tranquillo senza sapere tutto.
Posso dirvi ora che molti sviluppatori non conoscono la metà delle proprietà qui.
Direi che funzionano al massimo al 10% circa.
C'è così tanto altro materiale qui che non abbiamo quasi mai bisogno di usare.
E poi a un certo punto qualcosa viene fuori e dobbiamo fare qualcosa che non abbiamo mai fatto prima.
Lo facciamo su Google e scopriamo che va bene, ecco perché è la proprietà del cambiamento non curato.
Non ne avevo idea.
Ed è davvero quello che significa essere uno sviluppatore.
Fino ad ora con javascript abbiamo
lavorato in un piccolo mondo controllato dove impariamo funzioni e oggetti che impariamo sulle variabili.
E c'è un numero finito di modi di fare le cose
e c'è un sottoinsieme di conoscenze molto specifico che devi solo conoscere con il DOM.
Ora abbiamo questo enorme enorme ecosistema che funziona in così tante proprietà.
Quindi voglio solo ripetere che qui c'è così tanto.
Ci concentreremo sui pezzi importanti ma l'obiettivo non è quello di memorizzare.
L'obiettivo non è padroneggiare ogni singola proprietà.
Di nuovo il 10 percento al massimo è tutto ciò di cui hai bisogno per essere uno sviluppatore web competente.
OK, allora torniamo indietro e voglio solo andare avanti ancora una volta.
Riassumi ciò di cui abbiamo parlato.
Quindi il DOM sta per modello di oggetto del documento.
È l'interfaccia tra il tuo javascript e il tuo H. M. S. È come possiamo usare il nostro javascript per rendere le cose interattive.
È come facciamo cose come aggiungere
un nuovo elemento alla pagina o cambiare l'attributo ref di un link o
cambiare l'immagine di sfondo sul nostro corpo o come possiamo ottenere il valore da un modulo o possiamo fare convalide e animazioni personalizzate e interattive elementi in cui si fa
clic su un codice esegue tutte queste diverse possibilità derivate dal fatto che il modello di oggetto documento collega il nostro javascript con il loro H. M. S. accesso.
oggetti del modello a oggetti del documento ci dice che è un mucchio di oggetti javascript che sono elementi di modellazione nel nostro H.
Quindi la parte del modello a T. quantità.
Quindi abbiamo un ATAC qui finiamo con un oggetto che qui rappresenta quello atec.
E poi finiamo con un altro oggetto che rappresenta questo tag H1 che vediamo qui.
Infine si chiama il modello di oggetto documento perché
tutto vive all'interno di quell'unico oggetto chiamato documento.
È il nodo radice in cui tutto il resto vive all'interno.
Quindi il prossimo video inizieremo a scrivere del codice.