En este tutorial aprenderemos a utilizar la función querySelector que permite seleccionar elementos del DOM de forma nativa.
¡Hola, amigos de DevCode! Hoy aprenderemos a utilizar la función querySelector una alternativa al típico selector de jQuery sin tener que incluir la librería y de forma nativa. Si bien en javaScript tenemos las funciones getElementbyId y getElementsByClassName, estas no son lo suficiente flexibles como el selector $(‘ ’) de jQuery.
A modo de aplicación, en HTML tenemos una estructura que es una lista de los cursos que tenemos en la plataforma.
La estructura cuenta con una cabecera dentro de un contenedor.
Cursos DevCode
Y luego una lista de cursos, cada uno de estos cursos poseen una estructura estándar.
Dentro de la información que se presenta, podemos encontrar el nombre del curso, el link, la fuente de la imagen de su logo, la fecha de lanzamiento, y algunas etiquetas de su temática.
En JavaScript seleccionamos un elemento con el prefijo de clase, en este caso la que posee el título de la lista.
var elemento = document.querySelector(‘.title’).innerText;Cambiemos el selector, para obtener otra información, por ejemplo con ‘.tag’, al tener el documento muchos elementos con esta clase solo selecciona el primero.
También podemos seleccionar elementos en cascada, por ejemplo con ‘.info div’ obtendremos todos los elementos div, dentro de la clase info.
Cambiemos la función por querySelectorAll, esta función no se limita a seleccionar un solo elemento sino que almacena todos los elementos que posean el selector.
En la siguiente línea seleccionamos todos los elementos que poseen la clase curso, que según la estructura serían los nombres de los cursos.
var elementos = document.querySelectorAll(‘.curso’);Para extraer el texto del elemento realizaremos un recorrido por este.
for(i=0;i";
}En esta nueva función también puede aplicarse selectores en cascada como el que vimos en el ejemplo anterior ‘.info div’
Si queremos obtener las etiquetas usaremos el selector de clase ‘.tag’ esto nos devolverá todas las etiquetas. Pero si queremos obtener las etiquetas de un determinado curso tendremos que seleccionar primero la estructura de un determinado curso.
var padre = document.querySelectorAll('.cursos-row')[1];En la línea anterior se ha seleccionado toda la estructura perteneciente al segundo elemento de la lista que posee la etiqueta ‘.cursos-row'
Ahora podremos realizar una selección pero únicamente en esta sección del DOM que ha sido almacenada en la variable padre.
var elementos = padre.querySelectorAll(‘.tag’);Ahora únicamente se ha obtenido las etiquetas del segundo curso.
Si has llegado hasta aquí estoy seguro que deseas aprender mucho mas de JavaScript, recuerda que en DevCode ya están abiertas las inscripciones para el Curso Fundamentos de JavaScript, ¡Qué esperas, inscríbete ahora mismo! Además con tu suscripción podrás acceder a muchos otros cursos que complementarán tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.