El método querySelector: buscar un elemento

Cupcake llegó a la oficina y fue a verte de inmediato. El Jefe quiere hacer unos cambios en la página: destacar el destornillador «Barrenita» como producto del día y marcar el martillo «Mjölnir» como no disponible para pedidos.

¿Para qué usar JavaScript si podemos cambiar el HTML o los estilos? Porque no tenemos acceso a ninguno de los dos. Así lo decidió el dueño de la tienda. Solo podemos cambiar la página mediante scripts.

JavaScript trabaja con los elementos del HTML como objetos, no como las cadenas que escribimos en los archivos HTML. Cada objeto está relacionado con otros: tiene un elemento padre, elementos vecinos y elementos anidados. Juntos forman una estructura de árbol llamada DOM (Document Object Model, o modelo de objetos del documento).

En la raíz de este árbol está el objeto document. Desde él podemos acceder a los demás objetos. Este objeto global está disponible en los programas que se ejecutan en el navegador. En pocas palabras, document representa la página que contiene todos los elementos del HTML.

Con document podemos encontrar cualquier elemento de la página y después modificarlo. Para ello, el objeto tiene métodos especiales de búsqueda.

Uno de los más flexibles es querySelector. Recibe un selector CSS y devuelve el primer elemento que coincide con él. Admite cualquier selector CSS y se usa así:

// Buscar un elemento por su etiqueta
var list = document.querySelector('ul');

// Buscar el último elemento de una lista
var lastProduct = document.querySelector('li:last-child');

// Buscar un elemento por su clase
var price = document.querySelector('.price');

// Buscar el tercer elemento de la lista de productos
var thirdProduct = document.querySelector('.product:nth-child(3)');

En este capítulo declararemos las variables con var, como en los ejemplos.

Veamos la página de la tienda. Cada producto es un elemento li con la clase product. El destornillador «Barrenita», que debe convertirse en el producto del día, ocupa el segundo lugar en el HTML. Podemos encontrarlo con el selector .product:nth-child(2). El martillo «Mjölnir», que está agotado, es el último. Podemos encontrarlo con .product:last-child.

Hay muchos selectores CSS y varias formas de encontrar un mismo elemento. Puedes conocerlos o repasar cómo funcionan en estos capítulos:

• Selectores de CSS: tipos y combinaciones.
• Selectores estructurales y pseudoelementos.
• Selectores de atributos y estados de formularios.

Busquemos el segundo y el último elemento DOM de la lista de productos y mostrémoslos en la consola para comprobar que la búsqueda funciona.