0:00:02.084,0:00:06.101
Ya tienes muchas herramientas en tu caja de herramientas para encontrar elementos.

0:00:06.101,0:00:08.645
Y esas herramientas funcionan muy bien la mayor parte del tiempo.

0:00:08.645,0:00:12.492
Pero hay una herramienta final que es más poderosa que todas las anteriores:

0:00:12.492,0:00:18.070
la habilidad de encontrar elementos con base en cualquier selector de CSS.

0:00:18.070,0:00:20.384
¿Recuerdas los selectores de CSS?

0:00:20.384,0:00:24.562
Los básicos eran búsqueda por nombre de etiqueta,

0:00:24.562,0:00:26.170
o por "id",

0:00:26.170,0:00:27.518
o por clase.

0:00:27.518,0:00:30.027
Pero hay muchos otros selectores más avanzados:

0:00:30.027,0:00:35.333
selectores descendentes, selectores de atributos, clases y selectores de elementos combinados,

0:00:35.333,0:00:38.547
éste es un buen momento para revisar los selectores de CSS,

0:00:38.547,0:00:40.643
si es que los has olvidado.

0:00:40.643,0:00:45.642
Por ejemplo, ¿qué pasa si quiero estilizar especificamente sólo los elementos

0:00:45.642,0:00:50.765
con nombre de clase "animal" que están dentro de un párrafo?

0:00:50.765,0:00:54.606
Vamos a poner una etiqueta "" y hacerlo.

0:00:54.606,0:00:57.124
Así que primero debo escribir "p",

0:00:57.124,0:01:01.532
luego un espacio, para aclarar que estoy buscando dentro de los párrafos "'s",

0:01:01.532,0:01:06.492
y luego un punto y "animal" para decir que estoy buscando cualquier elemento

0:01:06.492,0:01:09.603
con el nombre de clase "animal".

0:01:09.603,0:01:12.671
Y coloreo de rojo.

0:01:12.671,0:01:14.130
Hermoso.

0:01:14.130,0:01:19.665
Ahora, puedo usar el mismo selector CSS para encontrar esos elementos en JavaScript,

0:01:19.665,0:01:24.944
usando el método "document.querySelectorAll()".

0:01:24.944,0:01:30.323
Así que cambiaré este línea que está aquí.

0:01:30.323,0:01:35.377
Y necesito pasar el selector de CSS como argumento,

0:01:35.377,0:01:38.392
como una cadena de caracteres entre comillas.

0:01:38.392,0:01:42.486
Y ahí, el párrafo es sobre gatos nuevamente.

0:01:42.486,0:01:45.823
Puedes pasar cualquier selector de CSS válido a esta función,

0:01:45.823,0:01:48.414
y te regresará una colección de elementos

0:01:48.414,0:01:50.883
al que puedes acceder en un ciclo.

0:01:50.883,0:01:53.507
¿Recuerdas que la vez pasada dijimos

0:01:53.507,0:01:57.617
que "getElementsByTagName()" nos devuelve un objeto de tipo "HTMLColección",

0:01:57.617,0:01:59.998
que es como un arreglo?

0:01:59.998,0:02:06.710
Bueno, este método nos regresa un "NodeList", que también es muy parecido a un arreglo,

0:02:06.710,0:02:12.530
en el que podemos usar corchetes, podemos verificar la longitud y todo eso.

0:02:12.530,0:02:16.282
Y probablemente no entrarás a ver las diferencias entre

0:02:16.282,0:02:20.029
un "NodeList" y un "HTMLCollection" cuando uses estos métodos.

0:02:20.029,0:02:24.375
Pero eres bienvenido a investigar si quieres aprender más sobre ellos.

0:02:24.375,0:02:28.924
Ok, también hay un método que busca selectores de CSS,

0:02:28.924,0:02:32.782
y regresa un sólo elemento, si sabes que tu selector de CSS

0:02:32.782,0:02:35.061
está seleccionando sólo una cosa.

0:02:35.061,0:02:37.409
En la práctica no es muy útil realmente,

0:02:37.409,0:02:40.458
porque generalmente tienes un "Id" que puedes usar en ese caso.

0:02:40.458,0:02:43.079
Pero te lo voy a mostrar por si a caso lo necesitas.

0:02:43.079,0:02:46.310
Así que aquí en lugar de escribir "getElementById", podríamos escribir:

0:02:46.310,0:02:48.577
'document.querySelector("'

0:02:48.577,0:02:53.565
y luego para esta consulta, debo hacer que éste sea un "Id", así que añado el símbolo numeral.

0:02:53.565,0:02:54.520
¡Tan tan!

0:02:54.520,0:02:57.917
Así que como puedes ver, éste es realmente similar a "querySelectorAll()",

0:02:57.917,0:03:01.547
con excepción de que estamos seleccionando sólo uno, así que usamos sólo "querySelector()",

0:03:01.547,0:03:06.510
y pasamos un selector CSS que esperamos que nos regrese sólo un elemento.

0:03:06.510,0:03:10.434
Así que, ¿cuándo debemos usar cada una de estas herramientas de tu caja de herramientas?

0:03:10.434,0:03:13.702
Las primeras que te mostré tienden a funcionar mejor.

0:03:13.702,0:03:15.734
Así que sugiero que las uses cuando puedas.

0:03:15.734,0:03:19.587
Pero si te encuentras en una situación en la que necesitas usar un selector CSS complejo,

0:03:19.587,0:03:24.053
y no puedes usar esas, entonces está bien que uses "querySelectorAll()".

0:03:24.053,0:03:26.304
Intenta usarlo en tu siguiente desafío,

0:03:26.304,0:03:31.344
y prepárate para ver de qué maneras puedes manipular esta página web.