JavaScript desempeña un papel fundamental en la manipulación y control de elementos HTML en una página. Una herramienta poderosa y versátil que nos ofrece JavaScript es el método querySelectorAll. En este artículo, exploraremos cómo utilizar querySelectorAll para seleccionar y manipular elementos Li a tráves de ejemplos de HTML y Javascript.
Acceder a los elementos de una lista con Javascript
Digamos que tenemos el siguiente docuento HTMl con una lista a la cual queremos acceder.
<html>
<body>
<div id="demodiv">
<ul>
<li>Adsense</li>
<li> Meta</li>
<li> Monetizer</li>
</ul>
</div>
<body>
</html>
Entonces para acceder a los elementos que han sido almacenados dentro de la lista UL vamos a crear un script que obtiene el valor de todos los elementos de la lista. A continuación una muestra de como queda el código.
// itera todos elementos con tag li
const items = document.querySelectorAll('li');
items.forEach(item => {
console.log(item.firstChild.data);
});
Con document.querySelectorAll('li'); se hace un recorrido por todo el documento HTML para hallar cada uno de los elementos de la lista de nuestro documento. Luego con items.forEach se itera por cada item del objeto items para aplicar funciones a cada elemento.
Una vez que se ha accedido a los elementos con la etiqueta LI podemos manipular cada item haciendo cambios a como deseemos.
El ejemplo anterior funciona en navegadores web modernos por lo cual te aconsejo instalar la versión mas reciente de tu navegador favorito.
Código Completo
Copia y pega el ejemplo en tu editor de texto favorito.
<html>
<body>
<div id="demodiv">
<ul>
<li>Adsense</li>
<li> Meta</li>
<li> Monetizer</li>
</ul>
</div>
<script>
const items = document.querySelectorAll('li');
items.forEach(item => {
console.log(item.firstChild.data);
});
</script>
<body>
</html>
Ahora que ya accedimos a los elementos LI del documento HTML, entonces podemos modificar o manipular según la necesidad. Te dejo algunos ejemplos que puedes usar para experimentar con el uso de Javascript.
Cambiar a Mayúscula los elementos LI con JS
<html>
<body>
<div id="demodiv">
<ul>
<li>Adsense</li>
<li>Meta</li>
<li>Monetizer</li>
</ul>
</div>
<script>
const items = document.querySelectorAll('li');
items.forEach(item => {
const text = item.firstChild.data;
item.firstChild.data = text.toUpperCase();
console.log(item.firstChild.data);
});
</script>
</body>
</html>
Cambiar el color de texto a los elementos LI
<html>
<body>
<div id="demodiv">
<ul>
<li>Adsense</li>
<li>Meta</li>
<li>Monetizer</li>
</ul>
</div>
<script>
const items = document.querySelectorAll('li');
items.forEach(item => {
item.style.color = 'blue';
});
</script>
</body>
</html>
Espero que los ejemplos Javascript mostrados halla sido de ayuda para manipular elementos LI con querySelectorAll en JavaScript. Puedes apoyar el blog con el simple hecho de compartir en redes sociales.