1
00:00:02,084 --> 00:00:06,101
Ya tienes muchas herramientas en tu caja de herramientas para encontrar elementos.

2
00:00:06,101 --> 00:00:08,645
Y esas herramientas funcionan muy bien la mayor parte del tiempo.

3
00:00:08,645 --> 00:00:12,492
Pero hay una herramienta final que es más poderosa que todas las anteriores:

4
00:00:12,492 --> 00:00:18,070
la habilidad de encontrar elementos con base en cualquier selector de CSS.

5
00:00:18,070 --> 00:00:20,384
¿Recuerdas los selectores de CSS?

6
00:00:20,384 --> 00:00:24,562
Los básicos eran búsqueda por nombre de etiqueta,

7
00:00:24,562 --> 00:00:26,170
o por "id",

8
00:00:26,170 --> 00:00:27,518
o por clase.

9
00:00:27,518 --> 00:00:30,027
Pero hay muchos otros selectores más avanzados:

10
00:00:30,027 --> 00:00:35,333
selectores descendentes, selectores de atributos, clases y selectores de elementos combinados,

11
00:00:35,333 --> 00:00:38,547
éste es un buen momento para revisar los selectores de CSS,

12
00:00:38,547 --> 00:00:40,643
si es que los has olvidado.

13
00:00:40,643 --> 00:00:45,642
Por ejemplo, ¿qué pasa si quiero estilizar especificamente sólo los elementos

14
00:00:45,642 --> 00:00:50,765
con nombre de clase "animal" que están dentro de un párrafo?

15
00:00:50,765 --> 00:00:54,606
Vamos a poner una etiqueta "" y hacerlo.

16
00:00:54,606 --> 00:00:57,124
Así que primero debo escribir "p",

17
00:00:57,124 --> 00:01:01,532
luego un espacio, para aclarar que estoy buscando dentro de los párrafos "'s",

18
00:01:01,532 --> 00:01:06,492
y luego un punto y "animal" para decir que estoy buscando cualquier elemento

19
00:01:06,492 --> 00:01:09,603
con el nombre de clase "animal".

20
00:01:09,603 --> 00:01:12,671
Y coloreo de rojo.

21
00:01:12,671 --> 00:01:14,130
Hermoso.

22
00:01:14,130 --> 00:01:19,665
Ahora, puedo usar el mismo selector CSS para encontrar esos elementos en JavaScript,

23
00:01:19,665 --> 00:01:24,944
usando el método "document.querySelectorAll()".

24
00:01:24,944 --> 00:01:30,323
Así que cambiaré este línea que está aquí.

25
00:01:30,323 --> 00:01:35,377
Y necesito pasar el selector de CSS como argumento,

26
00:01:35,377 --> 00:01:38,392
como una cadena de caracteres entre comillas.

27
00:01:38,392 --> 00:01:42,486
Y ahí, el párrafo es sobre gatos nuevamente.

28
00:01:42,486 --> 00:01:45,823
Puedes pasar cualquier selector de CSS válido a esta función,

29
00:01:45,823 --> 00:01:48,414
y te regresará una colección de elementos

30
00:01:48,414 --> 00:01:50,883
al que puedes acceder en un ciclo.

31
00:01:50,883 --> 00:01:53,507
¿Recuerdas que la vez pasada dijimos

32
00:01:53,507 --> 00:01:57,617
que "getElementsByTagName()" nos devuelve un objeto de tipo "HTMLColección",

33
00:01:57,617 --> 00:01:59,998
que es como un arreglo?

34
00:01:59,998 --> 00:02:06,710
Bueno, este método nos regresa un "NodeList", que también es muy parecido a un arreglo,

35
00:02:06,710 --> 00:02:12,530
en el que podemos usar corchetes, podemos verificar la longitud y todo eso.

36
00:02:12,530 --> 00:02:16,282
Y probablemente no entrarás a ver las diferencias entre

37
00:02:16,282 --> 00:02:20,029
un "NodeList" y un "HTMLCollection" cuando uses estos métodos.

38
00:02:20,029 --> 00:02:24,375
Pero eres bienvenido a investigar si quieres aprender más sobre ellos.

39
00:02:24,375 --> 00:02:28,924
Ok, también hay un método que busca selectores de CSS,

40
00:02:28,924 --> 00:02:32,782
y regresa un sólo elemento, si sabes que tu selector de CSS

41
00:02:32,782 --> 00:02:35,061
está seleccionando sólo una cosa.

42
00:02:35,061 --> 00:02:37,409
En la práctica no es muy útil realmente,

43
00:02:37,409 --> 00:02:40,458
porque generalmente tienes un "Id" que puedes usar en ese caso.

44
00:02:40,458 --> 00:02:43,079
Pero te lo voy a mostrar por si a caso lo necesitas.

45
00:02:43,079 --> 00:02:46,310
Así que aquí en lugar de escribir "getElementById", podríamos escribir:

46
00:02:46,310 --> 00:02:48,577
'document.querySelector("'

47
00:02:48,577 --> 00:02:53,565
y luego para esta consulta, debo hacer que éste sea un "Id", así que añado el símbolo numeral.

48
00:02:53,565 --> 00:02:54,520
¡Tan tan!

49
00:02:54,520 --> 00:02:57,917
Así que como puedes ver, éste es realmente similar a "querySelectorAll()",

50
00:02:57,917 --> 00:03:01,547
con excepción de que estamos seleccionando sólo uno, así que usamos sólo "querySelector()",

51
00:03:01,547 --> 00:03:06,510
y pasamos un selector CSS que esperamos que nos regrese sólo un elemento.

52
00:03:06,510 --> 00:03:10,434
Así que, ¿cuándo debemos usar cada una de estas herramientas de tu caja de herramientas?

53
00:03:10,434 --> 00:03:13,702
Las primeras que te mostré tienden a funcionar mejor.

54
00:03:13,702 --> 00:03:15,734
Así que sugiero que las uses cuando puedas.

55
00:03:15,734 --> 00:03:19,587
Pero si te encuentras en una situación en la que necesitas usar un selector CSS complejo,

56
00:03:19,587 --> 00:03:24,053
y no puedes usar esas, entonces está bien que uses "querySelectorAll()".

57
00:03:24,053 --> 00:03:26,304
Intenta usarlo en tu siguiente desafío,

58
00:03:26,304 --> 00:03:31,344
y prepárate para ver de qué maneras puedes manipular esta página web.