1
00:00:00,600 --> 00:00:03,770
Finora abbiamo parlato del motivo per cui la denominazione dominante è eccitante.

2
00:00:03,960 --> 00:00:05,100
Perché dovresti preoccuparti.

3
00:00:05,100 --> 00:00:09,420
I diversi siti che usano le infinite possibilità dei giochi tutte le cose eccitanti.

4
00:00:09,570 --> 00:00:12,710
Ma non abbiamo ancora parlato di cosa sia realmente il DOM.

5
00:00:12,810 --> 00:00:16,380
Quindi lo faremo in questo video per iniziare definiamolo.

6
00:00:16,380 --> 00:00:17,180
Dio sono.

7
00:00:17,220 --> 00:00:20,040
Dom sta per Modello oggetto documento.

8
00:00:20,190 --> 00:00:24,100
Il significato di queste tre parole avrà un po 'più senso nelle prossime diapositive.

9
00:00:24,100 --> 00:00:26,780
Ma iniziamo definendolo ad un livello più alto.

10
00:00:26,820 --> 00:00:30,560
Dom è l'interfaccia tra il tuo javascript e la tua età.

11
00:00:30,570 --> 00:00:37,080
Tim Mounty SS È fondamentalmente un mucchio di speciali oggetti javascript, funzioni di metodi javascript che possiamo usare per interagire

12
00:00:37,080 --> 00:00:42,870
con il nostro H. M. S. valutare possiamo cambiare le cose possiamo aggiungere elementi rimuovere elementi cambiare i

13
00:00:42,870 --> 00:00:48,930
colori animare ogni sorta di modi eccitanti di interagire con il loro H. M. S. valutare.

14
00:00:49,380 --> 00:00:54,270
In questa diapositiva parlo un po 'di come viene costruito il DOM e del perché si chiama

15
00:00:54,330 --> 00:00:56,070
il modello di oggetto del documento.

16
00:00:56,070 --> 00:01:02,180
tag con il mio link come testo e un H-1 con la mia intestazione come testo e questo è esso.

17
00:01:02,180 --> 00:01:09,210
Quindi quando carichiamo una pagina di posta elettronica, questa sembra in un browser ed è solo un po 'semplice da escludere, quindi hai un

18
00:01:09,210 --> 00:01:09,950
titolo e un

19
00:01:10,260 --> 00:01:16,360
Quindi quando apro questo nel browser vedo questo, ma dietro le quinte viene creato il DOM.

20
00:01:16,380 --> 00:01:19,190
È costruito da questo qui.

21
00:01:19,320 --> 00:01:24,270
Quindi quello che voglio dire è che questa età Tim è trasformata in un mucchio di oggetti javascript.

22
00:01:24,270 --> 00:01:27,440
Ogni oggetto modella uno di questi elementi.

23
00:01:27,450 --> 00:01:31,340
Ecco dove otteniamo la parte del modello a oggetti del modello a oggetti del documento.

24
00:01:31,650 --> 00:01:37,530
ancora una volta, per reiterare caricando ogni squadra nel browser, il browser ci mostra cose come questa.

25
00:01:37,530 --> 00:01:38,060
Quindi,

26
00:01:38,220 --> 00:01:43,890
Ma dietro le quinte rende in realtà questo modello di ogni singolo elemento con un oggetto javascript proprio

27
00:01:44,220 --> 00:01:47,490
come abbiamo modellato il mio cane Rusty usando un oggetto javascript.

28
00:01:47,490 --> 00:01:50,770
Aveva un nome di proprietà e un altro razza ed età.

29
00:01:50,850 --> 00:01:55,080
Questi oggetti sono fondamentalmente la stessa cosa tranne che il contenuto è diverso.

30
00:01:55,110 --> 00:02:03,120
Avranno cose come il tipo di tag, l'origine del testo, il testo, lo sfondo, il colore, il testo, le dimensioni,

31
00:02:03,120 --> 00:02:07,290
tutte le diverse proprietà che sono contenute all'interno di ogni oggetto.

32
00:02:07,290 --> 00:02:11,460
Trascorreremo molto tempo a lavorare con questi oggetti, quindi le specifiche non sono importanti.

33
00:02:11,640 --> 00:02:14,970
Tutto ciò che voglio sottolineare qui è che carichiamo ogni tim L. Viene visualizzato nel browser e il browser

34
00:02:15,120 --> 00:02:21,810
acquisisce quel Tim L e prende ciascun elemento e lo trasforma in un oggetto.

35
00:02:21,900 --> 00:02:22,610
In modo che copre la parte del modello oggetto.

36
00:02:22,680 --> 00:02:24,510
Che dire del documento.

37
00:02:24,540 --> 00:02:25,860
Quindi puoi vedere qui questo è

38
00:02:26,070 --> 00:02:31,950
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

39
00:02:31,950 --> 00:02:38,250
il documento.

40
00:02:38,250 --> 00:02:38,930
Quindi possiamo andare a qualsiasi pagina web.

41
00:02:39,120 --> 00:02:41,200
Quindi ho Google aperto e sto solo andando a digitare il con. La parola documento.

42
00:02:41,220 --> 00:02:45,190
E quando lo faccio ottengo questa grande cosa che ritorna a questo grande oggetto.

43
00:02:45,390 --> 00:02:49,470
Tranne che non sembra un oggetto javascript.

44
00:02:49,470 --> 00:02:51,900
Non è proprio quello che ci aspetteremmo.

45
00:02:51,900 --> 00:02:53,740
Questo perché il browser lo sta nascondendo da me.

46
00:02:53,760 --> 00:02:56,030
Ciò che in realtà mi sta mostrando è

47
00:02:56,130 --> 00:03:01,860
che la posta HQ assomiglia al testo ma non mi mostra gli oggetti reali che sono modellati su questo Timo.

48
00:03:01,860 --> 00:03:04,480
sull'oggetto console e cancelleremo quel D.

49
00:03:04,740 --> 00:03:11,550
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

50
00:03:11,550 --> 00:03:17,430
che ci è familiare.

51
00:03:17,430 --> 00:03:19,990
Quindi puoi vedere che è solo un oggetto normale,

52
00:03:20,070 --> 00:03:25,680
proprio come quelli che abbiamo scritto da soli, proprio come Rusty, l'oggetto cane, eccetto che qui ci sono molte più informazioni.

53
00:03:25,710 --> 00:03:30,220
Quindi abbiamo cose come i collegamenti di

54
00:03:30,510 --> 00:03:40,050
font o immagini, ma abbiamo anche cose come il corpo e questo corpo rappresenta l'intero corpo.

55
00:03:40,050 --> 00:03:41,040
Quindi ogni elemento che vedi qui è all'interno del corpo.

56
00:03:41,040 --> 00:03:44,320
proprietà, inclusa una chiamata Nodi del bambino.

57
00:03:44,340 --> 00:03:49,710
Quindi, se apro il corpo, vedrai che abbiamo un sacco di altre

58
00:03:49,710 --> 00:03:51,050
Quindi i nodi figli

59
00:03:51,150 --> 00:03:57,960
ci mostrano che c'è un div c'è un tag script e c'è un altro div all'interno del corpo.

60
00:03:57,960 --> 00:03:58,590
E se andassimo agli elementi lo vedremmo.

61
00:03:58,590 --> 00:04:00,710
Quindi ecco il corpo dentro il corpo.

62
00:04:00,710 --> 00:04:03,360
Abbiamo quel primo div abbiamo un tag script e abbiamo il secondo div.

63
00:04:03,420 --> 00:04:07,990
E poi, che cosa diciamo di aprire quel terzo

64
00:04:08,430 --> 00:04:15,480
div, ci aspetteremmo di vedere altre due div all'interno di quel secondo div.

65
00:04:15,480 --> 00:04:15,890
E se

66
00:04:15,900 --> 00:04:23,390
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.

67
00:04:23,430 --> 00:04:28,360
Esistono centinaia e centinaia di proprietà e metodi e nodi

68
00:04:28,500 --> 00:04:32,610
diversi e tutta questa struttura pazzesca di oggetti nidificati.

69
00:04:32,610 --> 00:04:34,730
Sono solo tante cose.

70
00:04:34,890 --> 00:04:36,250
È una di quelle volte che

71
00:04:36,270 --> 00:04:39,570
ho menzionato all'inizio di questa lezione in cui dovrai stare tranquillo senza sapere tutto.

72
00:04:39,570 --> 00:04:42,060
Posso dirvi ora che molti sviluppatori non conoscono la metà delle proprietà qui.

73
00:04:42,420 --> 00:04:46,450
Direi che funzionano al massimo al 10% circa.

74
00:04:46,500 --> 00:04:49,200
C'è così tanto altro materiale qui che non abbiamo quasi mai bisogno di usare.

75
00:04:49,200 --> 00:04:52,630
E poi a un certo punto qualcosa viene fuori e dobbiamo fare qualcosa che non abbiamo mai fatto prima.

76
00:04:52,680 --> 00:04:57,150
Lo facciamo su Google e scopriamo che va bene, ecco perché è la proprietà del cambiamento non curato.

77
00:04:57,330 --> 00:05:03,690
Non ne avevo idea.

78
00:05:03,750 --> 00:05:04,560
Ed è davvero quello che significa essere uno sviluppatore.

79
00:05:04,680 --> 00:05:06,500
Fino ad ora con javascript abbiamo

80
00:05:06,510 --> 00:05:11,190
lavorato in un piccolo mondo controllato dove impariamo funzioni e oggetti che impariamo sulle variabili.

81
00:05:11,190 --> 00:05:14,380
E c'è un numero finito di modi di fare le cose

82
00:05:14,610 --> 00:05:19,110
e c'è un sottoinsieme di conoscenze molto specifico che devi solo conoscere con il DOM.

83
00:05:19,110 --> 00:05:21,440
Ora abbiamo questo enorme enorme ecosistema che funziona in così tante proprietà.

84
00:05:21,450 --> 00:05:25,500
Quindi voglio solo ripetere che qui c'è così tanto.

85
00:05:25,620 --> 00:05:28,020
Ci concentreremo sui pezzi importanti ma l'obiettivo non è quello di memorizzare.

86
00:05:28,170 --> 00:05:32,100
L'obiettivo non è padroneggiare ogni singola proprietà.

87
00:05:32,130 --> 00:05:34,780
Di nuovo il 10 percento al massimo è tutto ciò di cui hai bisogno per essere uno sviluppatore web competente.

88
00:05:34,920 --> 00:05:39,560
OK, allora torniamo indietro e voglio solo andare avanti ancora una volta.

89
00:05:40,000 --> 00:05:43,080
Riassumi ciò di cui abbiamo parlato.

90
00:05:43,080 --> 00:05:44,450
Quindi il DOM sta per modello di oggetto del documento.

91
00:05:44,700 --> 00:05:48,030
È l'interfaccia tra il tuo javascript e il tuo H. M. S. È come possiamo usare il nostro javascript per rendere le cose interattive.

92
00:05:48,150 --> 00:05:52,150
È come facciamo cose come aggiungere

93
00:05:52,280 --> 00:05:55,180
un nuovo elemento alla pagina o cambiare l'attributo ref di un link o

94
00:05:55,260 --> 00:06:01,800
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

95
00:06:01,800 --> 00:06:07,320
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.

96
00:06:07,320 --> 00:06:13,160
oggetti del modello a oggetti del documento ci dice che è un mucchio di oggetti javascript che sono elementi di modellazione nel nostro H.

97
00:06:13,410 --> 00:06:18,960
Quindi la parte del modello a T. quantità.

98
00:06:19,260 --> 00:06:24,930
Quindi abbiamo un ATAC qui finiamo con un oggetto che qui rappresenta quello atec.

99
00:06:24,930 --> 00:06:27,470
E poi finiamo con un altro oggetto che rappresenta questo tag H1 che vediamo qui.

100
00:06:27,870 --> 00:06:32,980
Infine si chiama il modello di oggetto documento perché

101
00:06:33,180 --> 00:06:37,770
tutto vive all'interno di quell'unico oggetto chiamato documento.

102
00:06:37,980 --> 00:06:42,930
È il nodo radice in cui tutto il resto vive all'interno.

103
00:06:42,930 --> 00:06:43,740
Quindi il prossimo video inizieremo a scrivere del codice.

104
00:06:43,830 --> 00:06:46,850
 

105
00:06:47,070 --> 00:06:49,030