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.
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.
Problema:Disponer dos listas, una ordenada y otra no ordenada. Luego acceder a todas las opciones de la lista ordenada mediante el método querySelectorAll.
pagina.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</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">
<script src="funciones.js"></script>
</body>
</html>
funciones.js
document.querySelector("#boton1").addEventListener('click', (e) => {
let lista = document.querySelectorAll("ol li")
for (let elemento of lista)
elemento.style.backgroundColor = '#ff0'
})
Como vemos si queremos obtener todos los list item de la lista ordenada debemos pasar la regla CSS: ol li
let lista = 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.
Luego mediante un for of procedemos a recorrer cada elemento de la lista y modificar el color de fondo de cada item:
for (let elemento of lista)
elemento.style.backgroundColor = '#ff0'