 |
Accediendo a un conjunto de elementos HTML a través de un selector CSS (querySelectorAll)
Así como vimos que podemos acceder a un elemento del DOM haciendo referencia mediante un selector CSS podemos también acceder a un conjunto de elementos HTML mediante el método querySelectorAll.
Sintaxis
elementList = parentNode.querySelectorAll(selectors);Parámetros
- selectors Un DOMString que contiene uno o más selectores para buscar coincidencias. Esta cadena de texto debe ser una cadena CSS selector válida; si no lo es, se lanzará una excepción SyntaxError. Vea Locating DOM elements using selectors para más información acerca de utilizar selectores para identificar elementos. Se pueden especificar varios selectores separándolos utilizando comas.
El método querySelectorAll devuelve una lista con todos los nodos del DOM que cumplen la regla que le pasamos como parámetro.
Hay que tener en cuenta que querySelectorAll retorna un objeto de la clase NodeList. Confeccionaremos un ejemplo donde podemos ver como luego accedemos a cada nodo del Dom recuperado con el método querySelectorAll.
Ejemplo:
Disponer dos listas, una ordenada y otra no ordenada. Luego acceder a todas las opciones de la lista ordenada mediante el método querySelectorAll.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ob1=document.querySelector("#boton1");
ob1.addEventListener('click',presion,false);
}
function presion(e)
{
var ob1=document.querySelectorAll("ol li");
for(var x=0;x<ob1.length;x++)
ob1[x].style.backgroundColor='#ff0';
}
</script>
</head>
<body>
<ol>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ol>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
<input type="button" value="Cambiar" id="boton1">
</body>
</html>
El código javascript es:
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ob1=document.querySelector("#boton1");
ob1.addEventListener('click',presion,false);
}
function presion(e)
{
var ob1=document.querySelectorAll("ol li");
for(var x=0;x<ob1.length;x++)
ob1[x].style.backgroundColor='#ff0';
}
Como vemos si queremos obtener todos los list item de la lista ordenada debemos pasar la regla CSS: ol li
var ob1=document.querySelectorAll("ol li");
El método querySelectorAll en este caso retorna un objeto de tipo NodeList que contiene los tres list item contenidos en la lista ordenada.