querySelectorAll JavaScript y QuerySelector. Acceder a elementos por selectores CSS. Ejemplos (CU01134E)

QUERYSELECTORALL Y QUERYSELECTOR

Si recordamos la sintaxis CSS, a través de selectores podíamos definir de forma muy específica cómo se debían a aplicar estilos dentro de nuestra página web. Por ejemplo a través de la regla:

#menu1 div.destacado a {background-color: yellow;}

Se consigue que los elementos a (links) dentro de elementos div cuyo atributo class es “destacado” y están dentro de un elemento con id menu1 se muestren con color de fondo amarillo.

El selector #menu1 div.destacado a es un selector complejo que no resultaría alcanzable con las técnicas de acceso a nodos que hemos visto hasta el momento. Por ello surgen los métodos querySelector y querySelectorAll, que permiten acceder a nodos a través de un selector CSS.

La sintaxis a emplear es la siguiente:

Por ejemplo document.querySelectorAll("#calculadora .teclas span.operador");

La sintaxis a incluir dentro de las comillas para especificar el selector es exactamente la misma sintaxis que empleamos con CSS. Dentro de la especificación se pueden indicar varios selectores separados por comas, al igual que hacemos con CSS para aplicar una misma regla a distintos elementos. Por ejemplo para seleccionar todas las etiquetas de títulos de un documento podemos usar var elemsH = document.querySelectorAll("h1, h2, h3, h4, h5, h6");

Esta instrucción nos devuelve un array de nodos del DOM que cumplen con la especificación del selector CSS. Los índices del array serán 0, 1, 2, … hasta un número indeterminado (que dependerá del número de nodos que cumplan con el selector). Los nodos estarán ordenados según su orden de aparición en el árbol del DOM que define el documento HTML.

Frente al método general querySelectorAll existe otro método específico, querySelector, que devuelve un único nodo que cumple la especificación del selector. Este único nodo devuelto será el primero encontrado que cumpla con la especificación dentro del árbol del DOM.

La sintaxis es:

Típicamente el array de nodos (o el nodo individual) obtenido con estos métodos los almacenaremos dentro de una variable JavaScript para después realizar algún tipo de tratamiento. Por ejemplo:

var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");

var nodoIgual = document.querySelector (".igual");

Una vez tenemos una colección de nodos en una variable, podemos recorrerla usando un bucle for. Por ejemplo:

       for (var i=0; i<listaNodosOperadores.length; i++) {
                // Ejecutar acciones sobre el nodo listaNodosOperadores[i].
       }

Los métodos querySelector se pueden aplicar sobre document como hemos visto (para seleccionar todos los nodos hijos del nodo raíz que cumplen un criterio), pero también sobre un nodo especificado obtenido de otra manera. Por ejemplo:

var listaNodos = document.getElementById("calculadora").querySelectorAll(".teclas span.numero");

Aquí primero se obtiene el nodo cuyo id es “calculadora” y después se obtienen todos los nodos hijos de calculadora cuyo que son elementos span con class=”numero” que se encuentran dentro de un elemento con un valor class=”teclas”

En este caso lo indicado anteriormente se puede escribir también como:

var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");

Esta última forma de escritura resulta quizás más clara, y por eso la consideraremos preferible cuando podamos elegir entre usar una forma u otra.

Escribe y prueba el siguiente código, donde vemos un ejemplo de uso de querySelector y de querySelectorAll. Ten en cuenta que en algunos navegadores, en especial los más antiguos, quizás no se obtengan los resultados deseados.

El resultado esperado es que se muestre una calculadora y en su parte inferior dos botones: “Marcar números” y “Marcar operadores”. Al pulsar sobre “Marcar números” las teclas correspondientes a los números de la calculadora deberán verse de color negro con los números de color blanco. Al pulsar sobre “Marcar operadores” las teclas correspondientes a los operadores (+, -, =, etc.) deberán verse de color amarillo con los operadores de color negro.

Fíjate en el código: la selección de las teclas afectadas y el cambio de estilos se hace gracias al uso de los operadores querySelectorAll y querySelector de JavaScript.

EJERCICIO

1) Modifica el código del ejemplo de la calculadora JavaScript para que además de tener dos botones que permitan marcar números y operadores con distintos colores tenga:

a) Un botón que permita marcar la tecla C con color rojo fuerte y símbolo C en blanco.

b) Un botón que permita marcar la tecla con el punto con color violeta fuerte y símbolo . en blanco.

c) Un botón que permita marcar la pantalla visor de la calculadora en azul oscuro.

d) Un botón que permita limpiar todo lo que se haya marcado y volver a la situación original (es decir, que la calculadora se vea tal y como se veía inicialmente).

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.