WEBVTT

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

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

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

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

00:00:18.070 --> 00:00:20.384
¿Recuerdas los selectores de CSS?

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

00:00:24.562 --> 00:00:26.170
o por "id",

00:00:26.170 --> 00:00:27.518
o por clase.

00:00:27.518 --> 00:00:30.027
Pero hay muchos otros selectores más avanzados:

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

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

00:00:38.547 --> 00:00:40.643
si es que los has olvidado.

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

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

00:00:50.765 --> 00:00:54.606
Vamos a poner una etiqueta "" y hacerlo.

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

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

00:01:01.532 --> 00:01:06.492
y luego un punto y "animal" para decir que estoy buscando cualquier elemento

00:01:06.492 --> 00:01:09.603
con el nombre de clase "animal".

00:01:09.603 --> 00:01:12.671
Y coloreo de rojo.

00:01:12.671 --> 00:01:14.130
Hermoso.

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

00:01:19.665 --> 00:01:24.944
usando el método "document.querySelectorAll()".

00:01:24.944 --> 00:01:30.323
Así que cambiaré este línea que está aquí.

00:01:30.323 --> 00:01:35.377
Y necesito pasar el selector de CSS como argumento,

00:01:35.377 --> 00:01:38.392
como una cadena de caracteres entre comillas.

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

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

00:01:45.823 --> 00:01:48.414
y te regresará una colección de elementos

00:01:48.414 --> 00:01:50.883
al que puedes acceder en un ciclo.

00:01:50.883 --> 00:01:53.507
¿Recuerdas que la vez pasada dijimos

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

00:01:57.617 --> 00:01:59.998
que es como un arreglo?

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,

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

00:02:12.530 --> 00:02:16.282
Y probablemente no entrarás a ver las diferencias entre

00:02:16.282 --> 00:02:20.029
un "NodeList" y un "HTMLCollection" cuando uses estos métodos.

00:02:20.029 --> 00:02:24.375
Pero eres bienvenido a investigar si quieres aprender más sobre ellos.

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

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

00:02:32.782 --> 00:02:35.061
está seleccionando sólo una cosa.

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

00:02:37.409 --> 00:02:40.458
porque generalmente tienes un "Id" que puedes usar en ese caso.

00:02:40.458 --> 00:02:43.079
Pero te lo voy a mostrar por si a caso lo necesitas.

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

00:02:46.310 --> 00:02:48.577
'document.querySelector("'

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.

00:02:53.565 --> 00:02:54.520
¡Tan tan!

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

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

00:03:01.547 --> 00:03:06.510
y pasamos un selector CSS que esperamos que nos regrese sólo un elemento.

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

00:03:10.434 --> 00:03:13.702
Las primeras que te mostré tienden a funcionar mejor.

00:03:13.702 --> 00:03:15.734
Así que sugiero que las uses cuando puedas.

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,

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

00:03:24.053 --> 00:03:26.304
Intenta usarlo en tu siguiente desafío,

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