1
00:00:00,270 --> 00:00:01,320
Dar una buena acogida.

2
00:00:01,320 --> 00:00:06,270
En este video, vamos a pasar tiempo hablando de las diferentes formas de seleccionar elementos

3
00:00:06,270 --> 00:00:07,770
usando javascript y la muñeca.

4
00:00:08,100 --> 00:00:12,600
Antes de hablar sobre los selectores reales, necesitamos simplemente revisar el documento una vez más.

5
00:00:12,720 --> 00:00:18,540
Recuerde que todo nuestro dormitorio todos los objetos todas las representaciones de nuestros elementos todos viven

6
00:00:18,540 --> 00:00:20,160
dentro de este documento objeto.

7
00:00:20,220 --> 00:00:23,850
Es el objeto de nivel superior o el nodo raíz.

8
00:00:25,140 --> 00:00:27,760
Entonces, abriremos rápidamente cualquier ventana del navegador.

9
00:00:27,870 --> 00:00:32,060
Voy a usar Google e intentemos escribir estas cuatro líneas.

10
00:00:32,430 --> 00:00:39,660
Así que abra la consola y escriba document dot you are l y nos muestre la URL de la página en la

11
00:00:39,660 --> 00:00:40,300
que estamos.

12
00:00:40,610 --> 00:00:46,400
Puede hacer enlaces dot de documento y esa es una lista completa de cada enlace en la página.

13
00:00:46,410 --> 00:00:55,350
Todas y cada una de las etiquetas de anclaje que podemos hacer documentan que Vadi y este es el cuerpo completo con todos los demás elementos

14
00:00:55,350 --> 00:01:00,610
dentro de él que viven en el cuerpo y podemos hacer un document dot head.

15
00:01:00,660 --> 00:01:03,340
Así que ya hemos visto esto en los últimos videos.

16
00:01:03,360 --> 00:01:07,440
todos los selectores todos los métodos que vamos a aprender también viven dentro del documento.

17
00:01:07,440 --> 00:01:10,570
La razón por la que te lo vuelvo a mostrar es que

18
00:01:10,620 --> 00:01:17,250
Entonces, todo lo que aprendemos en este video va a comenzar con document dot algo.

19
00:01:17,280 --> 00:01:21,250
Entonces te mostraré cuáles son esas cosas.

20
00:01:21,270 --> 00:01:24,030
Hay cinco métodos principales de los que hablaremos en este video.

21
00:01:24,030 --> 00:01:25,860
Todos están integrados en el documento.

22
00:01:25,860 --> 00:01:27,920
Todos comienzan con document dot.

23
00:01:28,020 --> 00:01:35,820
Puede verlos aquí obtener elemento mediante elementos id get por nombre de clase get elements por nombre de etiqueta queery selector

24
00:01:36,060 --> 00:01:37,050
y queery selector.

25
00:01:37,050 --> 00:01:42,690
Todo si puedes recordar el video que hice al agregar métodos a un objeto donde básicamente podíamos almacenar

26
00:01:42,690 --> 00:01:46,020
una función como un valor en lugar de un objeto.

27
00:01:46,140 --> 00:01:52,650
Teníamos espacio para gatos en el espacio para perros y teníamos que decir el método que añadimos a nuestro objeto espacial para perros.

28
00:01:53,310 --> 00:01:55,080
Eso es exactamente lo que está pasando aquí.

29
00:01:55,260 --> 00:02:00,060
Estos cinco métodos han sido agregados al objeto del documento.

30
00:02:00,900 --> 00:02:05,760
Entonces, antes de que empecemos aquí, quiero mostrarte el correo H-G que voy

31
00:02:05,760 --> 00:02:07,100
a utilizar para demostraciones.

32
00:02:07,230 --> 00:02:10,660
Es una página muy muy simple solo tiene algunos elementos.

33
00:02:10,890 --> 00:02:16,020
Entonces nuestra cabeza normal está prácticamente vacía, aparte de un título o cuerpo.

34
00:02:16,020 --> 00:02:20,350
Y luego, dentro del cuerpo a H-1 hay uno que dice hola.

35
00:02:20,580 --> 00:02:21,910
Otro que dice adiós.

36
00:02:22,140 --> 00:02:29,250
Y luego tres aliados en lugar de una UL y esos tres aliados enumeran el elemento uno dos y tres

37
00:02:29,250 --> 00:02:30,160
son ligeramente diferentes.

38
00:02:30,180 --> 00:02:35,450
El primero tiene un resaltado de identificación y el último para tener una clase llamada en negrita.

39
00:02:35,670 --> 00:02:36,720
Entonces vamos a usar eso.

40
00:02:36,720 --> 00:02:40,430
El hecho de que algunos de ellos son H-1 algunos de los elementos son aliados.

41
00:02:40,440 --> 00:02:41,430
Algunos tienen clases.

42
00:02:41,430 --> 00:02:42,550
Uno tiene una identificación.

43
00:02:42,630 --> 00:02:47,160
Vamos a usar esas diferentes propiedades para seleccionarlas de diferentes maneras y diferentes combinaciones.

44
00:02:48,300 --> 00:02:53,850
Así que estoy usando el mismo código aquí en los ejemplos y estoy dibujando un cuadro verde para que pueda ver en

45
00:02:53,850 --> 00:02:54,680
las siguientes diapositivas.

46
00:02:54,690 --> 00:02:57,810
Un cuadro verde alrededor de lo que sea seleccionado.

47
00:02:58,410 --> 00:03:00,680
OK, así que comencemos con el primer método.

48
00:03:00,780 --> 00:03:02,640
Obtener elemento por ID.

49
00:03:02,970 --> 00:03:05,310
Entonces su nombre es un poco autoexplicativo.

50
00:03:05,550 --> 00:03:11,750
Toma un nombre ID y devolverá el elemento que coincida con ese ID.

51
00:03:11,820 --> 00:03:15,220
Recuerde que una identificación solo puede ocurrir una vez en una página.

52
00:03:15,240 --> 00:03:18,560
Así que aquí hay un documento de ejemplo con el nombre de elemento de identificación por ID.

53
00:03:18,600 --> 00:03:26,010
Lo destacado seleccionará a este aliado que tiene Id highlight para que seleccione el objeto y luego vuelva

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

55
00:03:27,030 --> 00:03:29,450
Lo mostraré rápidamente en el consejo.

56
00:03:29,520 --> 00:03:34,440
elemento get del tipo de documento por id highlight, que es nuestro nombre de identificación.

57
00:03:37,530 --> 00:03:40,000
Así que abriremos la consola a un

58
00:03:40,100 --> 00:03:43,020
Vamos a guardarlo en una variable llamada etiqueta.

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

60
00:03:43,890 --> 00:03:45,260
Y veamos TAG.

61
00:03:45,690 --> 00:03:49,940
Y puede ver que nos da la primera línea que tiene ID igual a resaltar.

62
00:03:50,040 --> 00:03:52,670
Entonces, seleccionamos algo por una identificación.

63
00:03:52,800 --> 00:03:58,140
De nuevo, nos lo está mostrando como si realmente lo envejeciera bien, pero el resultado de esto es en

64
00:03:58,140 --> 00:03:59,430
realidad un objeto javascript.

65
00:03:59,430 --> 00:04:02,980
Así que podemos hacer eso canceló Diyar nuevamente en la etiqueta.

66
00:04:03,330 --> 00:04:05,030
Y esto es realmente lo que parece.

67
00:04:05,040 --> 00:04:06,320
Todas estas propiedades

68
00:04:06,480 --> 00:04:12,630
Así que este es solo un buen atajo para que podamos ver visualmente lo que seleccionamos, pero en realidad es una

69
00:04:12,630 --> 00:04:13,670
representación de objetos.

70
00:04:13,860 --> 00:04:16,740
Está bien así que eso es todo lo que hay para obtener elemento por ID.

71
00:04:17,070 --> 00:04:23,220
Llamamos al método que pasamos en un argumento de cadena simple el nombre de una ID que queremos

72
00:04:23,220 --> 00:04:30,310
y luego va y encuentra el elemento coincidente que tiene la misma ID y nos devuelve la representación del objeto.

73
00:04:31,320 --> 00:04:36,780
El siguiente es obtener elementos por nombre de clase, por lo que su nombre te dice exactamente lo que hace.

74
00:04:36,840 --> 00:04:38,690
Al igual que obtener elemento por ID.

75
00:04:38,820 --> 00:04:43,540
Aunque esto es ligeramente diferente Obtenga elementos en plural con una S por nombre de clase.

76
00:04:43,620 --> 00:04:46,990
Recuerde que una clase puede ocurrir tantas veces como queramos en una página.

77
00:04:47,100 --> 00:04:53,520
Así que pasamos una cadena como en negrita y eso va a devolver una lista de todos los elementos en la página

78
00:04:53,670 --> 00:04:56,130
que tienen el nombre de clase correspondiente en negrita.

79
00:04:56,160 --> 00:05:01,590
En este caso, hay dos, pero si hubiera diez mil elementos en la página que tenían esa clase

80
00:05:02,010 --> 00:05:04,150
obtendríamos todos los 10000 en una lista.

81
00:05:04,380 --> 00:05:11,810
Así que vamos a demostrar esto, clasificaremos el elemento obtener documento por nombre de clase y podremos ver si conseguimos este pequeño autocompletar

82
00:05:11,810 --> 00:05:17,360
aquí para poder seleccionar el que deseamos obtener elementos por nombre de clase y luego el nombre

83
00:05:17,360 --> 00:05:19,610
de clase que queremos está en negrita.

84
00:05:20,130 --> 00:05:21,650
Vamos a guardarlo en una variable.

85
00:05:21,650 --> 00:05:28,400
Las etiquetas no etiquetan sino que las etiquetas porque vamos a obtener varias etiquetas si miramos qué etiquetas son.

86
00:05:28,730 --> 00:05:32,660
Es una lista de dos mentiras ambas con clase igual a en negrita.

87
00:05:32,690 --> 00:05:34,730
Técnicamente no es una matriz.

88
00:05:34,730 --> 00:05:38,330
Es algo llamado una lista de nodos que es similar a una matriz.

89
00:05:38,390 --> 00:05:40,450
Me gusta pensar que es una matriz liviana.

90
00:05:40,520 --> 00:05:43,700
Por lo tanto, viene con algunas de las cosas que esperarías de una matriz.

91
00:05:43,820 --> 00:05:46,430
Pero algunas de las características más avanzadas realmente faltan.

92
00:05:46,430 --> 00:05:52,000
Entonces, por ejemplo, podemos acceder a elementos como este usando las etiquetas de índice 0.

93
00:05:52,220 --> 00:05:59,240
Podemos hacer etiquetas para flanquear, pero no podemos hacer una para cada punto de etiquetas de bucle para cada una.

94
00:05:59,720 --> 00:06:02,930
Y si solo hago esto, me dirá que las etiquetas son para cada uno.

95
00:06:02,930 --> 00:06:03,990
No es una función.

96
00:06:04,250 --> 00:06:10,340
debe a que no hay ningún foreach definido para estas listas de nodos que está definido para las matrices y estas no son matrices.

97
00:06:10,340 --> 00:06:11,450
Así que eso se

98
00:06:11,750 --> 00:06:17,780
Y al igual que con get element by id, nos muestra esta bonita representación de cadenas pero detrás de las escenas,

99
00:06:17,930 --> 00:06:19,450
en realidad es un objeto.

100
00:06:19,460 --> 00:06:25,740
Así que de nuevo solo para demostrar que consolar el punto DIR y hacemos el cero de la etiqueta.

101
00:06:26,270 --> 00:06:31,960
Y en realidad es este gran objeto loco complejo con toneladas de propiedades.

102
00:06:32,540 --> 00:06:35,130
OK, así que vamos a obtener elementos por nombre de clase.

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

104
00:06:36,380 --> 00:06:37,600
No es todo un conjunto.

105
00:06:37,610 --> 00:06:44,110
Y contiene todos los elementos de la página que coinciden con el nombre de clase proporcionado que proporcionamos.

106
00:06:44,120 --> 00:06:46,860
A continuación tenemos los elementos por nombre etiquetado.

107
00:06:46,880 --> 00:06:51,050
Así que este funciona igual que obtener elemento por ID u obtener elementos por nombre de clase.

108
00:06:51,140 --> 00:06:56,800
Excepto que devuelve una lista de elementos que coinciden con un nombre de etiqueta dado como Ally o H-1.

109
00:06:56,810 --> 00:07:02,780
Entonces, en este caso estoy ejecutando document dight get elements por nombre de etiqueta Alhaj que me va a devolver

110
00:07:02,780 --> 00:07:06,040
una lista de los tres aliados que existen en esta página.

111
00:07:06,500 --> 00:07:16,040
equivalen a documentos que obtienen elementos por nombre de etiqueta y hagamos Alhaj primero y veamos las etiquetas, y obtenemos esta

112
00:07:16,040 --> 00:07:26,630
lista que tampoco es una matriz, es una lista de nodos que tiene tres aliados y no lo probaré para ti esta vez

113
00:07:26,630 --> 00:07:30,200
Entonces, demostremos de nuevo que las etiquetas var

114
00:07:30,290 --> 00:07:31,950
Fui al cónsul que DJR.

115
00:07:32,090 --> 00:07:35,300
Pero estos son objetos que no son solo cuerdas o no.

116
00:07:35,300 --> 00:07:39,030
H tiempo l son en realidad objetos javascript con todas esas propiedades.

117
00:07:39,200 --> 00:07:42,230
Entonces puedo hacer lo mismo con H-1.

118
00:07:42,410 --> 00:07:50,120
Así que seleccionaremos todas las h y miraremos las etiquetas y llegaremos a las h y la lista.

119
00:07:50,270 --> 00:07:53,650
No se limita a las etiquetas que vemos dentro del cuerpo.

120
00:07:53,660 --> 00:07:55,100
Yo también podría hacer algo como esto.

121
00:07:55,100 --> 00:08:03,200
Obtiene elementos por cuerpo de nombre de etiqueta y me devolverá una lista con un elemento, el cuerpo dentro

122
00:08:03,200 --> 00:08:04,250
de él.

123
00:08:04,250 --> 00:08:11,450
O también podría hacerlo por la cabeza o el elemento de tiempo o título o lo que quiera, pero la parte importante

124
00:08:11,450 --> 00:08:16,490
es que devuelve una lista, incluso si solo hay un elemento, todavía devuelve una lista.

125
00:08:16,580 --> 00:08:23,360
Entonces, para seleccionar el cuerpo podríamos hacer algo como el documento ECO de var body que obtiene elementos

126
00:08:24,920 --> 00:08:32,960
por cuerpo de nombre de etiqueta y luego simplemente tomar el primer elemento porque solo hay un elemento en esa lista.

127
00:08:32,960 --> 00:08:38,130
Y si miramos en qué cuerpo estamos, obtenemos este objeto gigante que todo el cuerpo.

128
00:08:38,390 --> 00:08:38,690
DE ACUERDO.

129
00:08:38,690 --> 00:08:40,880
Así que eso es Obtener elementos por nombre de etiqueta.

130
00:08:40,880 --> 00:08:43,960
Solo para reiterarle, póngale un nombre de etiqueta como Ally.

131
00:08:44,060 --> 00:08:48,510
Va y encuentra todos los elementos que coinciden y los devuelve a todos en una lista.

132
00:08:48,560 --> 00:08:50,960
Incluso si solo hay uno.

133
00:08:51,080 --> 00:08:54,070
Entonces aquí tengo otro ejemplo haciéndolo con un H-1.

134
00:08:54,200 --> 00:08:57,270
Puedes ver que selecciona las dos H una vez.

135
00:08:58,190 --> 00:09:00,620
Bien, ahora cambiamos de marcha un poco.

136
00:09:00,710 --> 00:09:05,450
Ya no tenemos un elemento get u obtenemos elementos mediante una sintaxis.

137
00:09:05,540 --> 00:09:10,730
Esto se llama selector de query y el selector de consultas es un método más nuevo que no ha existido durante

138
00:09:10,730 --> 00:09:11,360
tanto tiempo.

139
00:09:11,390 --> 00:09:13,640
Eso realmente hace nuestras vidas mucho más fáciles.

140
00:09:13,670 --> 00:09:18,980
Entonces realmente podemos usarlo para hacer todo lo que vimos con get element by id get elements por nombre

141
00:09:18,980 --> 00:09:23,980
de clase get elements con nombre de tag, podemos replicar todo eso con el selector de consultas.

142
00:09:24,350 --> 00:09:28,260
Entonces, lo que hace es tomar un selector de estilo CSSA.

143
00:09:28,370 --> 00:09:34,130
Entonces, un selector de estilo CSSA significa cualquiera de los selectores que usaríamos en lugar de un documento CSSA.

144
00:09:34,130 --> 00:09:40,280
tengo que hacer es usar la sintaxis CSSA con el símbolo hash o el Octa Thorpe y luego resaltar.

145
00:09:40,280 --> 00:09:47,540
En este ejemplo, estoy seleccionando algo basado en el resaltado ID, así que no puedo simplemente escribir la palabra resaltada como lo

146
00:09:47,630 --> 00:09:50,060
hice con get element by ID, pero

147
00:09:50,060 --> 00:09:52,640
Entonces, así es como seleccionas algo con el selector de consultas.

148
00:09:52,640 --> 00:09:58,880
Si quieres una identificación como lo harías con C Ss, obtenemos a este primer aliado con ID igual para resaltar.

149
00:09:59,180 --> 00:10:03,950
Antes de ir a la consola y escribir esto, le mostraré que podemos hacer lo

150
00:10:03,950 --> 00:10:11,190
mismo con un nombre de clase. La etiqueta var es igual al documento que el selector de queery doblado, que es cómo seleccionamos

151
00:10:11,190 --> 00:10:13,070
la clase en negrita usando C Ss.

152
00:10:13,350 --> 00:10:18,200
Y lo importante es que en realidad solo nos da el primer partido.

153
00:10:18,210 --> 00:10:23,910
Entonces, aunque hay dos elementos que han sido negados como clase, solo nos da el primero y ese es

154
00:10:23,910 --> 00:10:25,240
el punto del selector.

155
00:10:25,290 --> 00:10:30,960
Siempre devuelve un elemento. Hay otro método que veremos en breve que devolverá todos los

156
00:10:30,960 --> 00:10:31,990
elementos que coincidan.

157
00:10:32,010 --> 00:10:35,540
Entonces, un selector de consultas también puede incluir un nombre de etiqueta como el que tenemos aquí.

158
00:10:35,550 --> 00:10:39,140
H-1 y devuelve el primer H-1.

159
00:10:39,600 --> 00:10:45,570
Entonces podemos tomar los selectores de CSSA que escribimos todo el tiempo y ver SS y podemos usar esa sintaxis para seleccionar

160
00:10:45,570 --> 00:10:47,300
elementos con el selector de consultas.

161
00:10:47,640 --> 00:10:49,190
Entonces lo demostraré aquí.

162
00:10:49,410 --> 00:10:53,830
Déjame aclarar esto y vamos a seleccionar esto primero.

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

164
00:10:54,750 --> 00:10:56,310
Entonces todo lo que necesito hacer

165
00:10:56,340 --> 00:11:01,080
Var H-1 es igual al selector de consulta

166
00:11:03,930 --> 00:11:05,900
de documentos H-1.

167
00:11:06,450 --> 00:11:11,820
Y si vemos lo que H1 es nuevamente, es una buena representación de cadenas, pero en realidad es un

168
00:11:11,820 --> 00:11:13,700
objeto que representa todo este elemento.

169
00:11:14,220 --> 00:11:18,160
Entonces, vamos a intentar seleccionar basado en una ID.

170
00:11:18,210 --> 00:11:21,270
Así que voy a copiar esta línea en lugar de H-1.

171
00:11:21,270 --> 00:11:27,480
Esto será un aliado y en lugar de seleccionar el primer H-1 seleccionará el primer elemento que

172
00:11:27,480 --> 00:11:29,280
tenga el resaltado de ID.

173
00:11:29,640 --> 00:11:35,370
Y, por supuesto, solo hay un elemento porque es una identificación, por supuesto, es solo un elemento que tiene esta idea

174
00:11:35,380 --> 00:11:37,160
en una página y lo necesitamos.

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

176
00:11:38,400 --> 00:11:44,180
De lo contrario, buscará un nombre de etiqueta llamado resaltado que no existe y H. J. él fuera.

177
00:11:45,010 --> 00:11:52,020
Y si pulso "Enter" y miro a Alhaj, obtengo ese primer aliado con el elemento de la lista ID que es igual a resaltar.

178
00:11:52,500 --> 00:11:55,650
Por último, hagamos lo mismo con una clase.

179
00:11:55,800 --> 00:12:02,730
Así que utilizo el CSSA Leichter dot pleded, que es como seleccionamos una clase y si miramos a Ally, obtengo

180
00:12:02,730 --> 00:12:07,270
el segundo aliado con el elemento 2 de la lista con viñetas iguales.

181
00:12:07,440 --> 00:12:09,350
Entonces, hay otras cosas que podemos seleccionar.

182
00:12:09,510 --> 00:12:13,190
No solo se basa en un nombre de etiqueta o una ID o una clase.

183
00:12:13,200 --> 00:12:19,140
Esos son los más comunes, pero podríamos hacer otras cosas como esta que no funcionarán en mi

184
00:12:19,140 --> 00:12:25,770
página pero podría seleccionar todas las etiquetas de anclaje dentro de un aliado con una clase de especial.

185
00:12:25,770 --> 00:12:29,550
Y este es un selector C Ss más largo, pero es válido en los EE. UU.

186
00:12:29,620 --> 00:12:34,710
Entonces, todas las etiquetas de anclaje tienen clases especiales que están anidadas dentro de un aliado y eso es totalmente válido.

187
00:12:35,730 --> 00:12:37,920
De nuevo, no tengo esta configuración en mi página.

188
00:12:37,920 --> 00:12:40,900
Entonces, si presiono Enter solo voy a darme.

189
00:12:41,520 --> 00:12:44,180
No porque no encontró ninguna coincidencia.

190
00:12:45,030 --> 00:12:49,200
Entonces, como mencioné, el selector Querrey devuelve la primera coincidencia y eso es todo.

191
00:12:49,200 --> 00:12:53,040
Algunas veces es útil, por ejemplo, si quisieras seleccionar el cuerpo.

192
00:12:53,160 --> 00:12:59,180
del selector de consultas y eso te da el cuerpo a diferencia de cuando documentaba elementos de obtención de diques por cuerpo de nombre de etiqueta.

193
00:12:59,190 --> 00:13:01,380
Todo lo que tengo que hacer es decir el cuerpo

194
00:13:01,380 --> 00:13:05,030
Me dieron una lista y luego tuvieron que pedir el primer elemento.

195
00:13:05,220 --> 00:13:08,520
Si utilizo el selector de consultas, obtendré el cuerpo de inmediato.

196
00:13:08,730 --> 00:13:11,570
Pero la alternativa es el selector de queery.

197
00:13:11,640 --> 00:13:13,570
Entonces funciona exactamente de la misma manera.

198
00:13:13,590 --> 00:13:17,840
Se necesita un selector de conjunto de C pero devuelve todos los elementos coincidentes.

199
00:13:17,850 --> 00:13:27,030
Entonces, en este caso, estoy usando el documento selector de consultas, todo H-1 me devuelve h una o, en este caso, estoy usando

200
00:13:27,030 --> 00:13:28,520
la clase en negrita.

201
00:13:28,620 --> 00:13:29,820
Así que estilo CSSA.

202
00:13:29,850 --> 00:13:34,610
Necesito un punto en negrita y eso me da los dos elementos con la clase en negrita.

203
00:13:34,770 --> 00:13:36,930
Entonces, demostrémoslo en la estafa. Seleccionemos todos los aliados hasta ahora.

204
00:13:37,050 --> 00:13:40,140
Los aliados equivalen a documentar ese selector de consultas.

205
00:13:40,140 --> 00:13:43,200
Todo aliado

206
00:13:43,440 --> 00:13:46,560
Y eso me dará a todos ellos.

207
00:13:46,870 --> 00:13:48,300
Miro a los aliados.

208
00:13:48,510 --> 00:13:49,820
Puedes ver que tiene tres aliados.

209
00:13:50,040 --> 00:13:52,010
Una última vez que sé que soy un disco roto.

210
00:13:52,380 --> 00:13:54,370
Estos son objetos.

211
00:13:54,390 --> 00:13:55,660
Ellos no son HMO.

212
00:13:55,740 --> 00:13:57,200
Son objetos javascript que están construidos desde HMO.

213
00:13:57,270 --> 00:14:01,410
Y si hago lo mismo, lo hago con selector de consultas y presiono enter.

214
00:14:02,220 --> 00:14:08,450
Si miro a los aliados, no es una lista, es solo uno.

215
00:14:08,760 --> 00:14:12,180
Lo mismo si lo hice para una clase.

216
00:14:12,510 --> 00:14:14,520
Así que hagámoslo para la clase en negrita.

217
00:14:14,550 --> 00:14:17,670
Lo llamaremos en negrita y le pediremos que documente el selector de consulta en negrita.

218
00:14:17,670 --> 00:14:23,320
Y veo que es solo el primer elemento de la lista de elementos también.

219
00:14:24,060 --> 00:14:27,920
Y si consulto el selector todo, entonces obtengo una

220
00:14:27,990 --> 00:14:29,850
lista con los dos allí.

221
00:14:32,520 --> 00:14:35,630
Un punto de confusión a menudo para mis estudiantes es

222
00:14:35,860 --> 00:14:41,010
que todavía puede usar el selector de consultas, incluso si solo hay un elemento que está buscando.

223
00:14:41,010 --> 00:14:42,940
Entonces, podrías hacer algo como al igual que el selector de consulta de documento.

224
00:14:43,120 --> 00:14:51,070
Todo un ID como resaltado y miro a Ally y es una lista con un ítem.

225
00:14:51,300 --> 00:14:59,300
Es bastante raro que lo hagas, pero seguirá funcionando si solo hay una coincidencia.

226
00:14:59,350 --> 00:15:03,700
De acuerdo, cubrimos mucho terreno en este video.

227
00:15:04,080 --> 00:15:06,530
Regresemos al principio y hagamos un resumen muy rápido.

228
00:15:06,900 --> 00:15:10,320
Comenzamos hablando de cómo todos estos métodos están dentro del

229
00:15:10,530 --> 00:15:15,860
documento objeto que podemos seleccionar por ID con obtener elemento por ID, podemos seleccionar por nombre

230
00:15:15,880 --> 00:15:22,530
de clase con obtener elementos por nombre de clase y que devuelve una lista que no es en realidad una formación.

231
00:15:22,560 --> 00:15:24,530
Se llama lista de nodos.

232
00:15:24,610 --> 00:15:26,370
selector de consulta que es una toma de todos los intercambios.

233
00:15:26,380 --> 00:15:31,140
Podemos hacer lo mismo pero usando elementos GET por nombre de etiqueta que también devolverá una lista de nodos basada en un tipo de elemento que seleccionamos para entonces tenemos el

234
00:15:31,140 --> 00:15:36,850
Devuelve el primer elemento que coincide con un selector de CSSA determinado.

235
00:15:36,990 --> 00:15:40,860
Entonces podemos usarlo para hacer todo lo que obtiene el elemento por el nombre de la clase id

236
00:15:40,980 --> 00:15:46,680
y el nombre de la etiqueta; podemos darle una identificación como lo hacemos aquí en una clase como lo hacemos aquí o un nombre de elemento.

237
00:15:46,680 --> 00:15:52,210
Y luego hay un selector de consultas que funciona de la misma

238
00:15:52,620 --> 00:15:57,510
manera, excepto que devuelve una lista que no es una matriz.

239
00:15:57,510 --> 00:15:57,900
También es un estallido de nodo con todos los elementos que coinciden con un selector dado.

240
00:15:57,900 --> 00:16:01,800
Todo bien.

241
00:16:01,800 --> 00:16:02,040
Entonces voy a hacer que hagas un ejercicio realmente rápido

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