Ya tienes muchas herramientas en tu caja de herramientas para encontrar elementos.
Y esas herramientas funcionan muy bien la mayor parte del tiempo.
Pero hay una herramienta final que es más poderosa que todas las anteriores:
la habilidad de encontrar elementos con base en cualquier selector de CSS.
¿Recuerdas los selectores de CSS?
Los básicos eran búsqueda por nombre de etiqueta,
o por "id",
o por clase.
Pero hay muchos otros selectores más avanzados:
selectores descendentes, selectores de atributos, clases y selectores de elementos combinados,
éste es un buen momento para revisar los selectores de CSS,
si es que los has olvidado.
Por ejemplo, ¿qué pasa si quiero estilizar especificamente sólo los elementos
con nombre de clase "animal" que están dentro de un párrafo?
Vamos a poner una etiqueta "" y hacerlo.
Así que primero debo escribir "p",
luego un espacio, para aclarar que estoy buscando dentro de los párrafos "'s",
y luego un punto y "animal" para decir que estoy buscando cualquier elemento
con el nombre de clase "animal".
Y coloreo de rojo.
Hermoso.
Ahora, puedo usar el mismo selector CSS para encontrar esos elementos en JavaScript,
usando el método "document.querySelectorAll()".
Así que cambiaré este línea que está aquí.
Y necesito pasar el selector de CSS como argumento,
como una cadena de caracteres entre comillas.
Y ahí, el párrafo es sobre gatos nuevamente.
Puedes pasar cualquier selector de CSS válido a esta función,
y te regresará una colección de elementos
al que puedes acceder en un ciclo.
¿Recuerdas que la vez pasada dijimos
que "getElementsByTagName()" nos devuelve un objeto de tipo "HTMLColección",
que es como un arreglo?
Bueno, este método nos regresa un "NodeList", que también es muy parecido a un arreglo,
en el que podemos usar corchetes, podemos verificar la longitud y todo eso.
Y probablemente no entrarás a ver las diferencias entre
un "NodeList" y un "HTMLCollection" cuando uses estos métodos.
Pero eres bienvenido a investigar si quieres aprender más sobre ellos.
Ok, también hay un método que busca selectores de CSS,
y regresa un sólo elemento, si sabes que tu selector de CSS
está seleccionando sólo una cosa.
En la práctica no es muy útil realmente,
porque generalmente tienes un "Id" que puedes usar en ese caso.
Pero te lo voy a mostrar por si a caso lo necesitas.
Así que aquí en lugar de escribir "getElementById", podríamos escribir:
'document.querySelector("'
y luego para esta consulta, debo hacer que éste sea un "Id", así que añado el símbolo numeral.
¡Tan tan!
Así que como puedes ver, éste es realmente similar a "querySelectorAll()",
con excepción de que estamos seleccionando sólo uno, así que usamos sólo "querySelector()",
y pasamos un selector CSS que esperamos que nos regrese sólo un elemento.
Así que, ¿cuándo debemos usar cada una de estas herramientas de tu caja de herramientas?
Las primeras que te mostré tienden a funcionar mejor.
Así que sugiero que las uses cuando puedas.
Pero si te encuentras en una situación en la que necesitas usar un selector CSS complejo,
y no puedes usar esas, entonces está bien que uses "querySelectorAll()".
Intenta usarlo en tu siguiente desafío,
y prepárate para ver de qué maneras puedes manipular esta página web.