-
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.
