1
00:00:00,270 --> 00:00:01,320
Ben tornato.

2
00:00:01,320 --> 00:00:06,270
In questo video passeremo il tempo a parlare dei diversi modi di selezionare gli elementi

3
00:00:06,270 --> 00:00:07,770
usando javascript e la bambola.

4
00:00:08,100 --> 00:00:12,600
Prima di parlare dei selettori effettivi, dobbiamo rivedere il documento ancora una volta.

5
00:00:12,720 --> 00:00:18,540
Ricorda che il nostro intero dormitorio tutti gli oggetti tutte le rappresentazioni dei nostri elementi vivono tutti

6
00:00:18,540 --> 00:00:20,160
all'interno di questo oggetto documento.

7
00:00:20,220 --> 00:00:23,850
È l'oggetto di livello superiore o il nodo radice.

8
00:00:25,140 --> 00:00:27,760
Così rapidamente apriamo qualsiasi finestra del browser.

9
00:00:27,870 --> 00:00:32,060
Userò Google e proviamo a digitare queste quattro righe.

10
00:00:32,430 --> 00:00:39,660
Quindi apri la console e digita il punto del documento che stai e ci mostra l'URL della pagina su cui

11
00:00:39,660 --> 00:00:40,300
ci troviamo.

12
00:00:40,610 --> 00:00:46,400
Puoi fare collegamenti punto documento e questo è un intero elenco di ogni singolo link sulla pagina.

13
00:00:46,410 --> 00:00:55,350
Ogni singolo tag di ancoraggio che possiamo fare documenta che Vadi e questo è l'intero corpo con ogni altro elemento all'interno

14
00:00:55,350 --> 00:01:00,610
di esso che vive nel corpo e che possiamo fare testina del documento.

15
00:01:00,660 --> 00:01:03,340
Quindi l'abbiamo già visto negli ultimi video.

16
00:01:03,360 --> 00:01:07,440
che tutti i selettori di tutti i metodi che impareremo vivono anche all'interno del documento.

17
00:01:07,440 --> 00:01:10,570
La ragione per cui te la sto mostrando di nuovo è

18
00:01:10,620 --> 00:01:17,250
Quindi tutto ciò che apprendiamo in questo video inizierà con qualcosa di documento.

19
00:01:17,280 --> 00:01:21,250
Quindi ti mostrerò cosa sono quei qualcosa.

20
00:01:21,270 --> 00:01:24,030
Ci sono cinque metodi principali di cui parleremo in questo video.

21
00:01:24,030 --> 00:01:25,860
Sono tutti integrati nel documento.

22
00:01:25,860 --> 00:01:27,920
Iniziano tutti con il punto del documento.

23
00:01:28,020 --> 00:01:35,820
Puoi vederli qui ottenere elemento per id ottenere elementi per nome classe ottenere elementi per nome tag selettore di selezione e

24
00:01:36,060 --> 00:01:37,050
selettore di query.

25
00:01:37,050 --> 00:01:42,690
Tutto ciò se riesci a ripensare al video che ho fatto aggiungendo metodi a un oggetto in cui

26
00:01:42,690 --> 00:01:46,020
potremmo fondamentalmente memorizzare una funzione come valore anziché come oggetto.

27
00:01:46,140 --> 00:01:52,650
Avevamo uno spazio per gatti nello spazio per cani e abbiamo dovuto parlare del metodo che abbiamo aggiunto al nostro oggetto spazio cane.

28
00:01:53,310 --> 00:01:55,080
Questo è esattamente ciò che sta accadendo qui.

29
00:01:55,260 --> 00:02:00,060
Questi cinque metodi sono stati tutti aggiunti all'oggetto del documento.

30
00:02:00,900 --> 00:02:05,760
Quindi, prima di iniziare davvero, voglio mostrarti la posta H-G che userò

31
00:02:05,760 --> 00:02:07,100
a scopo dimostrativo.

32
00:02:07,230 --> 00:02:10,660
È una pagina molto semplice, ha solo alcuni elementi.

33
00:02:10,890 --> 00:02:16,020
Quindi la nostra testa normale è praticamente vuota a parte un titolo o un corpo.

34
00:02:16,020 --> 00:02:20,350
E poi dentro il corpo per H-1 è quello che dice ciao.

35
00:02:20,580 --> 00:02:21,910
Un altro che dice addio.

36
00:02:22,140 --> 00:02:29,250
E poi tre alleati invece di un UL e quei tre alleati elencano l'articolo uno due e tre sono

37
00:02:29,250 --> 00:02:30,160
leggermente diversi.

38
00:02:30,180 --> 00:02:35,450
Il primo ha un evidenziatore ID e l'ultimo ad avere una classe chiamata in grassetto.

39
00:02:35,670 --> 00:02:36,720
Quindi lo useremo.

40
00:02:36,720 --> 00:02:40,430
Il fatto che alcuni di loro siano H-1 alcuni degli elementi sono alleati.

41
00:02:40,440 --> 00:02:41,430
Alcuni hanno classi.

42
00:02:41,430 --> 00:02:42,550
Uno ha un ID.

43
00:02:42,630 --> 00:02:47,160
Useremo queste diverse proprietà per selezionarle in modi diversi e combinazioni diverse.

44
00:02:48,300 --> 00:02:53,850
Quindi sto usando lo stesso codice qui negli esempi e sto disegnando una casella verde in modo che tu possa vedere

45
00:02:53,850 --> 00:02:54,680
nelle prossime diapositive.

46
00:02:54,690 --> 00:02:57,810
Una casella verde attorno a qualsiasi cosa selezionata.

47
00:02:58,410 --> 00:03:00,680
OK, iniziamo con il primo metodo.

48
00:03:00,780 --> 00:03:02,640
Ottieni elemento per ID.

49
00:03:02,970 --> 00:03:05,310
Quindi il suo nome è un po 'auto-esplicativo.

50
00:03:05,550 --> 00:03:11,750
Riceve un nome ID e restituirà l'elemento corrispondente a quell'ID.

51
00:03:11,820 --> 00:03:15,220
Ricorda che un ID può verificarsi solo una volta su una pagina.

52
00:03:15,240 --> 00:03:18,560
Quindi, ecco un documento di esempio ottenuto get elemento per ID.

53
00:03:18,600 --> 00:03:26,010
Evidenzia seleziona questo alleato che ha l'evidenziazione Id, quindi seleziona l'oggetto e poi torna

54
00:03:26,070 --> 00:03:26,940
a noi.

55
00:03:27,030 --> 00:03:29,450
Lo mostrerò rapidamente nel consiglio.

56
00:03:29,520 --> 00:03:34,440
di documento ottieni elemento per evidenziazione ID che è il nostro nome ID.

57
00:03:37,530 --> 00:03:40,000
Quindi apriremo la console a un tipo

58
00:03:40,100 --> 00:03:43,020
Salviamolo in una variabile chiamata tag.

59
00:03:43,020 --> 00:03:43,730
Hit enter.

60
00:03:43,890 --> 00:03:45,260
E guardiamo il TAG.

61
00:03:45,690 --> 00:03:49,940
E puoi vedere che ci dà la prima riga che ha ID uguale a evidenziare.

62
00:03:50,040 --> 00:03:52,670
Quindi abbiamo selezionato qualcosa tramite un ID.

63
00:03:52,800 --> 00:03:58,140
Di nuovo lo sta mostrando a noi come se fosse effettivamente invecchiato bene, ma il risultato di questo è

64
00:03:58,140 --> 00:03:59,430
in realtà un oggetto javascript.

65
00:03:59,430 --> 00:04:02,980
Quindi possiamo farlo cancellato di nuovo da Diyar sul tag.

66
00:04:03,330 --> 00:04:05,030
E questo è in realtà ciò che sembra.

67
00:04:05,040 --> 00:04:06,320
Tutte queste proprietà.

68
00:04:06,480 --> 00:04:12,630
Quindi questa è solo una bella scorciatoia per noi per vedere visivamente ciò che abbiamo selezionato, ma in realtà è una

69
00:04:12,630 --> 00:04:13,670
rappresentazione di oggetti.

70
00:04:13,860 --> 00:04:16,740
Va bene, ecco tutto quello che c'è da ottenere per ID.

71
00:04:17,070 --> 00:04:23,220
Chiamiamo il metodo con cui passiamo in un argomento a stringa singola il nome di un ID che

72
00:04:23,220 --> 00:04:30,310
vogliamo e poi va e trova l'elemento corrispondente che ha lo stesso ID e restituisce la rappresentazione dell'oggetto a noi.

73
00:04:31,320 --> 00:04:36,780
Il prossimo è ottenere elementi per nome della classe, quindi il suo nome ti dice esattamente cosa fa.

74
00:04:36,840 --> 00:04:38,690
Proprio come ottenere elemento per ID.

75
00:04:38,820 --> 00:04:43,540
Anche se questo è leggermente diverso Ottieni elementi plurali con un S per nome della classe.

76
00:04:43,620 --> 00:04:46,990
Ricorda che una classe può verificarsi tutte le volte che vogliamo su una pagina.

77
00:04:47,100 --> 00:04:53,520
Quindi passiamo una stringa come in grassetto e restituiremo un elenco di tutti gli elementi della pagina con

78
00:04:53,670 --> 00:04:56,130
il nome della classe corrispondente in grassetto.

79
00:04:56,160 --> 00:05:01,590
In questo caso ce ne sono due, ma se nella pagina c'erano diecimila elementi con quella classe avremmo

80
00:05:02,010 --> 00:05:04,150
ottenuto tutti i 10000 in una lista.

81
00:05:04,380 --> 00:05:11,810
Quindi andiamo a dimostrarlo, quindi valuteremo il documento come elemento per nome della classe e potrai vedere se otteniamo questo piccolo completamento automatico

82
00:05:11,810 --> 00:05:17,360
in modo da poter selezionare quello che vogliamo ottenere per nome della classe e quindi il nome

83
00:05:17,360 --> 00:05:19,610
della classe che vogliamo è in grassetto.

84
00:05:20,130 --> 00:05:21,650
Salviamolo in una variabile.

85
00:05:21,650 --> 00:05:28,400
I tag non vengono taggati ma tag perché recupereremo più tag se osserviamo quali sono i tag.

86
00:05:28,730 --> 00:05:32,660
È una lista di due bugie sia con classe uguale a in grassetto.

87
00:05:32,690 --> 00:05:34,730
Tecnicamente non è un array.

88
00:05:34,730 --> 00:05:38,330
È qualcosa chiamato lista di nodi che è simile ad array.

89
00:05:38,390 --> 00:05:40,450
Mi piace pensarlo come un array leggero.

90
00:05:40,520 --> 00:05:43,700
Quindi viene fornito con alcune delle cose che ci si aspetterebbe da un array.

91
00:05:43,820 --> 00:05:46,430
Ma alcune delle funzionalità più avanzate sono effettivamente mancanti.

92
00:05:46,430 --> 00:05:52,000
Quindi, per esempio, possiamo accedere a elementi come questo usando un indice 0.

93
00:05:52,220 --> 00:05:59,240
Possiamo fare tag per outflank ma non possiamo fare un per ogni punto dei tag loop per ciascuno.

94
00:05:59,720 --> 00:06:02,930
E se lo faccio, mi dirà che i tag sono per ciascuno.

95
00:06:02,930 --> 00:06:03,990
Non è una funzione.

96
00:06:04,250 --> 00:06:10,340
esiste un foreach definito per questi elenchi di nodi definito per gli array e questi non sono matrici.

97
00:06:10,340 --> 00:06:11,450
Questo perché non

98
00:06:11,750 --> 00:06:17,780
E proprio come con get Elemento di ID ci mostra questa bella rappresentazione di stringa, ma dietro le quinte

99
00:06:17,930 --> 00:06:19,450
è in realtà un oggetto.

100
00:06:19,460 --> 00:06:25,740
Quindi, ancora una volta solo per dimostrare che per te console punto DIR e facciamo zero tag.

101
00:06:26,270 --> 00:06:31,960
Ed è in realtà questo grande oggetto pazzo con tonnellate di proprietà.

102
00:06:32,540 --> 00:06:35,130
OK, quindi prendiamo gli elementi per nome della classe.

103
00:06:35,270 --> 00:06:36,320
Restituisce una lista.

104
00:06:36,380 --> 00:06:37,600
Non proprio un array.

105
00:06:37,610 --> 00:06:44,110
E contiene ogni elemento della pagina che corrisponde al nome della classe data che abbiamo fornito.

106
00:06:44,120 --> 00:06:46,860
Avanti abbiamo ottenuto elementi dal nome con tag.

107
00:06:46,880 --> 00:06:51,050
Quindi questo funziona proprio come ottenere elemento per ID o ottenere elementi per nome della classe.

108
00:06:51,140 --> 00:06:56,800
Tranne che restituisce un elenco di elementi che corrispondono a un determinato nome di tag come Ally o H-1.

109
00:06:56,810 --> 00:07:02,780
Quindi in questo caso sto eseguendo documenti che ottengono elementi dal nome del tag Alhaj che mi restituirà

110
00:07:02,780 --> 00:07:06,040
un elenco dei tre alleati che esistono in questa pagina.

111
00:07:06,500 --> 00:07:16,040
al documento che ottiene gli elementi in base al nome del tag e facciamo prima Alhaj e guardiamo i tag e otteniamo

112
00:07:16,040 --> 00:07:26,630
che questa lista non sia un array piuttosto che un elenco di nodi che ha tre alleati e non lo dimostrerò a te questa volta

113
00:07:26,630 --> 00:07:30,200
Quindi dimostriamo ancora che i tag var equivalgono

114
00:07:30,290 --> 00:07:31,950
Sono andato al Console che DJR.

115
00:07:32,090 --> 00:07:35,300
Ma questi sono oggetti che non sono solo archi o meno.

116
00:07:35,300 --> 00:07:39,030
H tim l sono in realtà oggetti javascript con tutte quelle proprietà.

117
00:07:39,200 --> 00:07:42,230
Quindi posso fare la stessa cosa per H-1.

118
00:07:42,410 --> 00:07:50,120
Quindi selezioneremo tutti quelli che guardiamo ai tag e arriviamo a quelli e all'elenco.

119
00:07:50,270 --> 00:07:53,650
Non è solo limitato ai tag che vediamo all'interno del corpo.

120
00:07:53,660 --> 00:07:55,100
Potrei anche fare qualcosa di simile.

121
00:07:55,100 --> 00:08:03,200
Ottieni elementi per nome del corpo del tag e restituirà a me un elenco con un elemento all'interno

122
00:08:03,200 --> 00:08:04,250
del corpo.

123
00:08:04,250 --> 00:08:11,450
Oppure potrei farlo anche per la testa o l'elemento temporale o il titolo o qualsiasi altra cosa voglio, ma la parte importante

124
00:08:11,450 --> 00:08:16,490
è che restituisce una lista anche se c'è solo un elemento che restituisce ancora una lista.

125
00:08:16,580 --> 00:08:23,360
Quindi per selezionare il corpo potremmo fare qualcosa come il documento var body ECOs che ottiene

126
00:08:24,920 --> 00:08:32,960
elementi dal corpo del nome del tag e quindi prendi il primo oggetto perché c'è solo un elemento in quell'elenco.

127
00:08:32,960 --> 00:08:38,130
E se guardiamo a quale corpo siamo, otteniamo questo oggetto gigante che è l'intero corpo.

128
00:08:38,390 --> 00:08:38,690
OK.

129
00:08:38,690 --> 00:08:40,880
Ecco che ottieni elementi per nome del tag.

130
00:08:40,880 --> 00:08:43,960
Solo per ribadire gli dai un nome come Ally.

131
00:08:44,060 --> 00:08:48,510
Va e trova tutti gli elementi che lo abbinano e li restituisce tutti in una lista.

132
00:08:48,560 --> 00:08:50,960
Anche se ce n'è solo uno.

133
00:08:51,080 --> 00:08:54,070
Quindi qui ho un altro esempio che lo fa con un H-1.

134
00:08:54,200 --> 00:08:57,270
Puoi vedere che seleziona una volta sola le due H.

135
00:08:58,190 --> 00:09:00,620
Ok, adesso cambiamo marcia un po '.

136
00:09:00,710 --> 00:09:05,450
Non abbiamo più un elemento get o elementi con una sintassi.

137
00:09:05,540 --> 00:09:10,730
Questo è chiamato selettore di query e il selettore di query è un metodo più nuovo che non è mai esistito da

138
00:09:10,730 --> 00:09:11,360
così tanto tempo.

139
00:09:11,390 --> 00:09:13,640
Questo rende le nostre vite molto più semplici.

140
00:09:13,670 --> 00:09:18,980
Quindi, in realtà, possiamo usarlo per fare tutto ciò che abbiamo visto con get element da id ottenere elementi

141
00:09:18,980 --> 00:09:23,980
per nome della classe ottenere elementi con nome tag, possiamo replicare tutto ciò con il selettore di query.

142
00:09:24,350 --> 00:09:28,260
Quindi, quello che fa è prendere un selettore di stile CSSA.

143
00:09:28,370 --> 00:09:34,130
Quindi un selettore di stile CSSA significa solo uno qualsiasi dei selettori che useremmo al posto di un documento CSSA.

144
00:09:34,130 --> 00:09:40,280
devo fare è usare la sintassi CSSA con il simbolo dell'hash o l'Octa Thorpe e quindi evidenziare.

145
00:09:40,280 --> 00:09:47,540
Quindi in questo esempio sto selezionando qualcosa in base all'evidenziazione dell'ID, quindi non posso semplicemente scrivere la parola evidenzia come ho

146
00:09:47,630 --> 00:09:50,060
fatto con get element per ID ma

147
00:09:50,060 --> 00:09:52,640
Ecco come si seleziona qualcosa con il selettore di query.

148
00:09:52,640 --> 00:09:58,880
Se vuoi un ID proprio come faresti con C Ss e otteniamo questo primo alleato con ID uguale a evidenziare.

149
00:09:59,180 --> 00:10:03,950
Prima di passare alla console e scriverlo, ti mostrerò che possiamo fare la stessa cosa

150
00:10:03,950 --> 00:10:11,190
con un nome di classe. Var tag equivale a dire che il selettore di queery ha il punto piegato, ovvero come selezioneremmo la

151
00:10:11,190 --> 00:10:13,070
classe in grassetto usando C Ss.

152
00:10:13,350 --> 00:10:18,200
E ciò che è importante è che in realtà ci dà solo la prima partita.

153
00:10:18,210 --> 00:10:23,910
Quindi, anche se ci sono due elementi che hanno messo in evidenza come classe ci dà solo il primo ed è

154
00:10:23,910 --> 00:10:25,240
questo il punto di selezione.

155
00:10:25,290 --> 00:10:30,960
Restituisce sempre solo un elemento, c'è un altro metodo che vedremo tra breve che restituirà tutti gli

156
00:10:30,960 --> 00:10:31,990
elementi che corrispondono.

157
00:10:32,010 --> 00:10:35,540
Quindi un selettore di query può anche contenere un nome di tag come quello che abbiamo qui.

158
00:10:35,550 --> 00:10:39,140
H-1 e restituisce il primissimo H-1.

159
00:10:39,600 --> 00:10:45,570
Quindi possiamo prendere i selettori CSSA che scriviamo tutto il tempo e vediamo SS e possiamo usare quella sintassi per selezionare gli

160
00:10:45,570 --> 00:10:47,300
elementi con il selettore di query.

161
00:10:47,640 --> 00:10:49,190
Quindi lo dimostrerò qui.

162
00:10:49,410 --> 00:10:53,830
Consentitemi di chiarirlo e selezioniamo prima questo.

163
00:10:53,830 --> 00:10:54,630
H-1.

164
00:10:54,750 --> 00:10:56,310
Quindi tutto ciò che devo fare.

165
00:10:56,340 --> 00:11:01,080
Var H-1 è uguale al selettore di interrogazione

166
00:11:03,930 --> 00:11:05,900
del documento H-1.

167
00:11:06,450 --> 00:11:11,820
E se guardiamo a ciò che H1 è di nuovo, è una bella rappresentazione di stringa, ma in realtà

168
00:11:11,820 --> 00:11:13,700
è un oggetto che rappresenta l'intero elemento.

169
00:11:14,220 --> 00:11:18,160
Quindi, dopo proviamo a selezionare in base a un ID.

170
00:11:18,210 --> 00:11:21,270
Quindi ho intenzione di copiare questa riga piuttosto che H-1.

171
00:11:21,270 --> 00:11:27,480
Questo sarà un alleato e piuttosto che selezionare il primo H-1 selezionerà il primo oggetto

172
00:11:27,480 --> 00:11:29,280
che ha l'evidenziazione dell'ID.

173
00:11:29,640 --> 00:11:35,370
E ovviamente c'è un solo articolo perché è un ID ovviamente è solo un articolo che ha questa idea su una

174
00:11:35,380 --> 00:11:37,160
pagina e abbiamo bisogno di questo.

175
00:11:37,170 --> 00:11:38,220
Octa Thorgeir.

176
00:11:38,400 --> 00:11:44,180
Altrimenti cercherà un nome di tag chiamato evidenziazione che non esiste e H. J. lui fuori.

177
00:11:45,010 --> 00:11:52,020
E se premo invio e guardo Alhaj, ottengo quel primo alleato con un elemento di elenco con un ID uguale a evidenziare.

178
00:11:52,500 --> 00:11:55,650
Infine facciamo la stessa cosa con una classe.

179
00:11:55,800 --> 00:12:02,730
Quindi uso il punto piegato Leichter CSSA che è il modo in cui selezioniamo una classe e, se guardiamo ad Ally,

180
00:12:02,730 --> 00:12:07,270
ottengo il secondo alleato con la voce 2 della lista puntata uguale alla classe.

181
00:12:07,440 --> 00:12:09,350
Quindi ci sono altre cose che possiamo selezionare.

182
00:12:09,510 --> 00:12:13,190
Non si basa solo su un nome di tag o un ID o una classe.

183
00:12:13,200 --> 00:12:19,140
Quelle sono le più comuni ma potremmo fare altre cose come questa che non funzioneranno sulla

184
00:12:19,140 --> 00:12:25,770
mia pagina ma potrei selezionare tutti i tag di ancoraggio all'interno di un alleato con una classe speciale.

185
00:12:25,770 --> 00:12:29,550
E questo è un selettore C S più lungo ma valido negli Stati Uniti.

186
00:12:29,620 --> 00:12:34,710
Quindi tutti i tag di ancoraggio hanno speciali di classe che sono annidati all'interno di un alleato e questo è totalmente valido.

187
00:12:35,730 --> 00:12:37,920
Ancora una volta non ho questo set sulla mia pagina.

188
00:12:37,920 --> 00:12:40,900
Quindi, se premo Invio, mi sta solo andando a darmi.

189
00:12:41,520 --> 00:12:44,180
No perché non ha trovato alcuna corrispondenza.

190
00:12:45,030 --> 00:12:49,200
Quindi, come ho detto, Querrey selector restituisce la prima partita e basta.

191
00:12:49,200 --> 00:12:53,040
A volte è utile ad esempio se si desidera selezionare il corpo.

192
00:12:53,160 --> 00:12:59,180
del selettore di query e questo ti dà il corpo a differenza di quando ho fatto documenti recuperati da elementi del corpo del tag name.

193
00:12:59,190 --> 00:13:01,380
Tutto quello che devo fare è dire il corpo

194
00:13:01,380 --> 00:13:05,030
Mi hanno dato una lista e poi hanno dovuto chiedere il primo elemento.

195
00:13:05,220 --> 00:13:08,520
Se utilizzo il selettore di query, otterrò subito il corpo.

196
00:13:08,730 --> 00:13:11,570
Ma l'alternativa è tutto selettore.

197
00:13:11,640 --> 00:13:13,570
Quindi funziona esattamente allo stesso modo.

198
00:13:13,590 --> 00:13:17,840
Prende una C come un selettore, ma restituisce tutti gli elementi corrispondenti.

199
00:13:17,850 --> 00:13:27,030
Quindi in questo caso sto usando il documento che il selettore di query H-1 restituisce entrambi h una volta o in questo caso sto usando

200
00:13:27,030 --> 00:13:28,520
la classe in grassetto.

201
00:13:28,620 --> 00:13:29,820
Quindi stile CSSA.

202
00:13:29,850 --> 00:13:34,610
Ho bisogno di punti in grassetto e questo mi dà entrambi gli elementi con la classe in grassetto uguale.

203
00:13:34,770 --> 00:13:36,930
Quindi dimostriamo che nel con. Selezioniamo tutti gli alleati finora.

204
00:13:37,050 --> 00:13:40,140
Allies equivale a documentare quel selettore di query.

205
00:13:40,140 --> 00:13:43,200
All alleato.

206
00:13:43,440 --> 00:13:46,560
E questo mi darà tutti loro.

207
00:13:46,870 --> 00:13:48,300
Guardo gli alleati.

208
00:13:48,510 --> 00:13:49,820
Puoi vedere che ha tre alleati.

209
00:13:50,040 --> 00:13:52,010
Un'ultima volta so che sono un disco rotto.

210
00:13:52,380 --> 00:13:54,370
Questi sono oggetti.

211
00:13:54,390 --> 00:13:55,660
Non sono HMO.

212
00:13:55,740 --> 00:13:57,200
Sono oggetti javascript costruiti dall'HMO.

213
00:13:57,270 --> 00:14:01,410
E se faccio la stessa cosa ma lo faccio invece con il selettore di query e premo invio.

214
00:14:02,220 --> 00:14:08,450
Se guardo gli alleati non è una lista, è solo uno.

215
00:14:08,760 --> 00:14:12,180
Quindi la stessa cosa se l'avessi fatto per una lezione.

216
00:14:12,510 --> 00:14:14,520
Quindi facciamolo per la classe audace.

217
00:14:14,550 --> 00:14:17,670
Lo chiameremo in grassetto e documenteremo il punto di selezione della query in grassetto.

218
00:14:17,670 --> 00:14:23,320
E guardo che è solo la prima voce dell'elenco.

219
00:14:24,060 --> 00:14:27,920
E se faccio interrogare il selettore, ottengo una lista

220
00:14:27,990 --> 00:14:29,850
con entrambi lì dentro.

221
00:14:32,520 --> 00:14:35,630
Un punto di confusione spesso per i miei studenti è che

222
00:14:35,860 --> 00:14:41,010
puoi ancora usare il selettore di query tutto anche se c'è solo un elemento che stai cercando.

223
00:14:41,010 --> 00:14:42,940
Quindi si potrebbe fare qualcosa come varial al pari del selettore di query sui documenti.

224
00:14:43,120 --> 00:14:51,070
Tutti i documenti identificativi come highlight e guardo Ally ed è una lista con un oggetto.

225
00:14:51,300 --> 00:14:59,300
È piuttosto raro che tu lo faccia, ma funzionerà comunque se c'è una sola partita.

226
00:14:59,350 --> 00:15:03,700
Va bene quindi abbiamo coperto molto terreno in questo video.

227
00:15:04,080 --> 00:15:06,530
Quindi torniamo all'inizio e facciamo un rapido riassunto.

228
00:15:06,900 --> 00:15:10,320
Abbiamo iniziato parlando di come tutti questi metodi sono all'interno

229
00:15:10,530 --> 00:15:15,860
dell'oggetto documento che possiamo selezionare per ID con get element per ID, possiamo selezionare per nome

230
00:15:15,880 --> 00:15:22,530
della classe con get elementi per nome della classe e che restituisce un elenco che non è in realtà un array.

231
00:15:22,560 --> 00:15:24,530
Si chiama una lista di nodi.

232
00:15:24,610 --> 00:15:26,370
selettore di query che è un jack di tutti i mestieri.

233
00:15:26,380 --> 00:15:31,140
Possiamo fare la stessa cosa ma usando GET elementi per nome tag che restituirà anche un elenco di nodi basato su un tipo di elemento che selezioniamo per poi abbiamo il

234
00:15:31,140 --> 00:15:36,850
Restituisce il primo elemento che corrisponde a un dato selettore CSSA.

235
00:15:36,990 --> 00:15:40,860
Quindi possiamo usarlo per fare tutto ciò che ottiene l'elemento in base al nome della classe

236
00:15:40,980 --> 00:15:46,680
id e al nome del tag, potremmo dargli un ID come facciamo qui in una classe come facciamo qui o un nome di elemento.

237
00:15:46,680 --> 00:15:52,210
E poi c'è il selettore di query che funziona allo stesso modo

238
00:15:52,620 --> 00:15:57,510
tranne che restituisce un elenco che non è un array.

239
00:15:57,510 --> 00:15:57,900
È anche un nodo scoppiato con tutti gli elementi che corrispondono ad un dato selettore.

240
00:15:57,900 --> 00:16:01,800
Tutto ok.

241
00:16:01,800 --> 00:16:02,040
Quindi la prossima volta ti farò fare un esercizio davvero veloce

242
00:16:02,040 --> 00:16:04,500