[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:02.08,0:00:06.10,Default,,0000,0000,0000,,Ya tienes muchas herramientas en tu caja de herramientas para encontrar elementos.
Dialogue: 0,0:00:06.10,0:00:08.64,Default,,0000,0000,0000,,Y esas herramientas funcionan muy bien la mayor parte del tiempo.
Dialogue: 0,0:00:08.64,0:00:12.49,Default,,0000,0000,0000,,Pero hay una herramienta final que es más poderosa que todas las anteriores:
Dialogue: 0,0:00:12.49,0:00:18.07,Default,,0000,0000,0000,,la habilidad de encontrar elementos con base en cualquier selector de CSS.
Dialogue: 0,0:00:18.07,0:00:20.38,Default,,0000,0000,0000,,¿Recuerdas los selectores de CSS?
Dialogue: 0,0:00:20.38,0:00:24.56,Default,,0000,0000,0000,,Los básicos eran búsqueda por nombre de etiqueta,
Dialogue: 0,0:00:24.56,0:00:26.17,Default,,0000,0000,0000,,o por "id",
Dialogue: 0,0:00:26.17,0:00:27.52,Default,,0000,0000,0000,,o por clase.
Dialogue: 0,0:00:27.52,0:00:30.03,Default,,0000,0000,0000,,Pero hay muchos otros selectores más avanzados:
Dialogue: 0,0:00:30.03,0:00:35.33,Default,,0000,0000,0000,,selectores descendentes, selectores de atributos, clases y selectores de elementos combinados,
Dialogue: 0,0:00:35.33,0:00:38.55,Default,,0000,0000,0000,,éste es un buen momento para revisar los selectores de CSS,
Dialogue: 0,0:00:38.55,0:00:40.64,Default,,0000,0000,0000,,si es que los has olvidado.
Dialogue: 0,0:00:40.64,0:00:45.64,Default,,0000,0000,0000,,Por ejemplo, ¿qué pasa si quiero estilizar especificamente sólo los elementos
Dialogue: 0,0:00:45.64,0:00:50.76,Default,,0000,0000,0000,,con nombre de clase "animal" que están dentro de un párrafo?
Dialogue: 0,0:00:50.76,0:00:54.61,Default,,0000,0000,0000,,Vamos a poner una etiqueta "" y hacerlo.
Dialogue: 0,0:00:54.61,0:00:57.12,Default,,0000,0000,0000,,Así que primero debo escribir "p",
Dialogue: 0,0:00:57.12,0:01:01.53,Default,,0000,0000,0000,,luego un espacio, para aclarar que estoy buscando dentro de los párrafos "'s",
Dialogue: 0,0:01:01.53,0:01:06.49,Default,,0000,0000,0000,,y luego un punto y "animal" para decir que estoy buscando cualquier elemento
Dialogue: 0,0:01:06.49,0:01:09.60,Default,,0000,0000,0000,,con el nombre de clase "animal".
Dialogue: 0,0:01:09.60,0:01:12.67,Default,,0000,0000,0000,,Y coloreo de rojo.
Dialogue: 0,0:01:12.67,0:01:14.13,Default,,0000,0000,0000,,Hermoso.
Dialogue: 0,0:01:14.13,0:01:19.66,Default,,0000,0000,0000,,Ahora, puedo usar el mismo selector CSS para encontrar esos elementos en JavaScript,
Dialogue: 0,0:01:19.66,0:01:24.94,Default,,0000,0000,0000,,usando el método "document.querySelectorAll()".
Dialogue: 0,0:01:24.94,0:01:30.32,Default,,0000,0000,0000,,Así que cambiaré este línea que está aquí.
Dialogue: 0,0:01:30.32,0:01:35.38,Default,,0000,0000,0000,,Y necesito pasar el selector de CSS como argumento,
Dialogue: 0,0:01:35.38,0:01:38.39,Default,,0000,0000,0000,,como una cadena de caracteres entre comillas.
Dialogue: 0,0:01:38.39,0:01:42.49,Default,,0000,0000,0000,,Y ahí, el párrafo es sobre gatos nuevamente.
Dialogue: 0,0:01:42.49,0:01:45.82,Default,,0000,0000,0000,,Puedes pasar cualquier selector de CSS válido a esta función,
Dialogue: 0,0:01:45.82,0:01:48.41,Default,,0000,0000,0000,,y te regresará una colección de elementos
Dialogue: 0,0:01:48.41,0:01:50.88,Default,,0000,0000,0000,,al que puedes acceder en un ciclo.
Dialogue: 0,0:01:50.88,0:01:53.51,Default,,0000,0000,0000,,¿Recuerdas que la vez pasada dijimos
Dialogue: 0,0:01:53.51,0:01:57.62,Default,,0000,0000,0000,,que "getElementsByTagName()" nos devuelve un objeto de tipo "HTMLColección",
Dialogue: 0,0:01:57.62,0:01:59.100,Default,,0000,0000,0000,,que es como un arreglo?
Dialogue: 0,0:01:59.100,0:02:06.71,Default,,0000,0000,0000,,Bueno, este método nos regresa un "NodeList", que también es muy parecido a un arreglo,
Dialogue: 0,0:02:06.71,0:02:12.53,Default,,0000,0000,0000,,en el que podemos usar corchetes, podemos verificar la longitud y todo eso.
Dialogue: 0,0:02:12.53,0:02:16.28,Default,,0000,0000,0000,,Y probablemente no entrarás a ver las diferencias entre
Dialogue: 0,0:02:16.28,0:02:20.03,Default,,0000,0000,0000,,un "NodeList" y un "HTMLCollection" cuando uses estos métodos.
Dialogue: 0,0:02:20.03,0:02:24.38,Default,,0000,0000,0000,,Pero eres bienvenido a investigar si quieres aprender más sobre ellos.
Dialogue: 0,0:02:24.38,0:02:28.92,Default,,0000,0000,0000,,Ok, también hay un método que busca selectores de CSS,
Dialogue: 0,0:02:28.92,0:02:32.78,Default,,0000,0000,0000,,y regresa un sólo elemento, si sabes que tu selector de CSS
Dialogue: 0,0:02:32.78,0:02:35.06,Default,,0000,0000,0000,,está seleccionando sólo una cosa.
Dialogue: 0,0:02:35.06,0:02:37.41,Default,,0000,0000,0000,,En la práctica no es muy útil realmente,
Dialogue: 0,0:02:37.41,0:02:40.46,Default,,0000,0000,0000,,porque generalmente tienes un "Id" que puedes usar en ese caso.
Dialogue: 0,0:02:40.46,0:02:43.08,Default,,0000,0000,0000,,Pero te lo voy a mostrar por si a caso lo necesitas.
Dialogue: 0,0:02:43.08,0:02:46.31,Default,,0000,0000,0000,,Así que aquí en lugar de escribir "getElementById", podríamos escribir:
Dialogue: 0,0:02:46.31,0:02:48.58,Default,,0000,0000,0000,,'document.querySelector("'
Dialogue: 0,0:02:48.58,0:02:53.56,Default,,0000,0000,0000,,y luego para esta consulta, debo hacer que éste sea un "Id", así que añado el símbolo numeral.
Dialogue: 0,0:02:53.56,0:02:54.52,Default,,0000,0000,0000,,¡Tan tan!
Dialogue: 0,0:02:54.52,0:02:57.92,Default,,0000,0000,0000,,Así que como puedes ver, éste es realmente similar a "querySelectorAll()",
Dialogue: 0,0:02:57.92,0:03:01.55,Default,,0000,0000,0000,,con excepción de que estamos seleccionando sólo uno, así que usamos sólo "querySelector()",
Dialogue: 0,0:03:01.55,0:03:06.51,Default,,0000,0000,0000,,y pasamos un selector CSS que esperamos que nos regrese sólo un elemento.
Dialogue: 0,0:03:06.51,0:03:10.43,Default,,0000,0000,0000,,Así que, ¿cuándo debemos usar cada una de estas herramientas de tu caja de herramientas?
Dialogue: 0,0:03:10.43,0:03:13.70,Default,,0000,0000,0000,,Las primeras que te mostré tienden a funcionar mejor.
Dialogue: 0,0:03:13.70,0:03:15.73,Default,,0000,0000,0000,,Así que sugiero que las uses cuando puedas.
Dialogue: 0,0:03:15.73,0:03:19.59,Default,,0000,0000,0000,,Pero si te encuentras en una situación en la que necesitas usar un selector CSS complejo,
Dialogue: 0,0:03:19.59,0:03:24.05,Default,,0000,0000,0000,,y no puedes usar esas, entonces está bien que uses "querySelectorAll()".
Dialogue: 0,0:03:24.05,0:03:26.30,Default,,0000,0000,0000,,Intenta usarlo en tu siguiente desafío,
Dialogue: 0,0:03:26.30,0:03:31.34,Default,,0000,0000,0000,,y prepárate para ver de qué maneras puedes manipular esta página web.