esta operación, realizada directamente en JavaScript, era un poco compleja. Sin embargo, con el paso de los años, los navegadores han introducido nuevas funcionalidades (como, precisamente, nuestra función querySelectorAll), que en muchos casos hacen que adoptar una librería externa no valga en absoluto la pena.
A continuación, podemos utilizar listaLI para mostrar cuántos elementos hay en la lista (tres, en nuestro caso) recurriendo a la propiedad length del objeto listaLI, que precisamente contiene el número de elementos que contiene el objeto.
const mensaje = `Hay ${listaLI.length} elementos en la lista UL "numeros"`;document.getElementById('output').innerHTML = mensaje`;
Ahora, vamos a tratar de complicar un poco nuestro ejemplo. En lugar de limitarnos a contabilizar cuántos son los elementos de la lista, también queremos asociar a los elementos LI de esta lista un atributo “value”, cuyo valor expresa el número en cifras.
En otras palabras, queremos obtener un resultado como el que ves a continuación:
<ul id="numeros"><li value="1">uno</li><li value="2">dos</li><li value="3">tres</li></ul>
| NOTA | Naturalmente, debemos pensar que tenemos que realizar esta operación de manera dinámica, por ejemplo, porque no podemos modificar nosotros el archivo HTML (creado por otro desarrollador) o porque la misma lista UL ha sido creada dinámicamente. |
| NOTA | Para no complicar demasiado el ejercicio, supongamos que los elementos LI están definidos por orden (“uno”, “dos”...) y que, por tanto, no necesitamos saber que la palabra “dos” indica el número 2, sino que asumiremos simplemente que el primer elemento es 1, el segundo es 2, etc. |
Esto significa que debemos repetir la operación de agregar los atributos value varias veces, una para cada elemento de la lista. Para ejecutar estas operaciones, recurrimos a uno de los muchos bucles que JavaScript pone a nuestra disposición: el bucle for con índice.
Su forma es la siguiente:
for (valor índice inicial; valor máximo del índice; cuánto aumenta el índice) {instrucciones a repetir}
Por ejemplo, el bucle:
for (let i=1; i <= 10; i+=1) {instruccion(i); }
repite la instrucción 10 veces, con la variable índice i, que asume valores del 1 (i=1) al 10 (i <= 10), con paso 1 (i += 1): 1, 2, 3 hasta 10. Cuando i llega a 11, el bucle termina y la ejecución continúa desde la línea siguiente.
| NOTA | Es habitual asignar un nombre corto, como i, j, k, a las variables índice de los bucles. |
En nuestro ejemplo, hemos utilizado el operador de asignación compuesta, que combina un operador aritmético (+, en este caso) con el operador de asignación (=).
Con este operador, conseguimos realizar rápidamente 5 de i, añade 1 y asigna el resultado a i”.
La notación:
i+=1
corresponde a:
i = i+1
El operador de asignación compuesta proporciona una solución más sintética y con menos probabilidades de error, dado que no se debe repetir el nombre de la variable sobre la que se trabaja.
Una alternativa a este operador es el operador de autoincremento (i++), que desarrolla la misma función.
La diferencia principal entre el operador de asignación compuesta (i+=1) y el operador de autoincremento (i++) consiste en el hecho que el primero permite incrementos de distintas unidades (i+=2, por ejemplo), mientras que el segundo permite solo incrementos de una unidad.
Volviendo a nuestro problema, podemos añadir al código mostrado anteriormente el bucle siguiente:
for (let i=0; i < listaLI.length; i+=1) {listaLI.item(i).value = i+1;}
Puedes encontrar este ejemplo en el archivo bucles2 .html
Analicemos con detalle este código.
El bucle empieza por el número 0 y acaba antes del 3 (el valor de listaLI.length), es decir, el bucle se ejecuta 3 veces (cuando i=0, cuando i=1 y cuando i=2) y se interrumpe cuando i=3 (i < listaLI.length).
La instrucción contenida en el bucle for (es decir, que se repite en cada iteración del bucle):
listaLI.item(i).value = i+1;
utiliza el conjunto de valores item que representa el conjunto de elementos LI que se encuentran en nuestra lista UL.
Cada elemento (es decir, cada elemento LI) tiene una posición determinada en el conjunto. Podemos acceder a un elemento en concreto indicando entre los paréntesis de item un número que representa su posición.
En la primera ejecución del bucle, accedo al elemento en la posición 0 (i al inicio vale 0), en la segunda repetición, accedo al elemento en la posición 1 (i ha aumentado una unidad), en la tercera y última, accedo al elemento en la posición 2 (i ha aumentado otra unidad).
En nuestro caso específico:
•En la primera vuelta del bucle for, i = 0 y listaLI.item(i) indica el elemento LI “uno”.
•En la vuelta siguiente, i = 1 y listaLI.item(i) indica el elemento LI “dos”.
•En la tercera y última vuelta, i = 2 y listaLI.item(i) indica el elemento LI “tres”.
Observa que en JavaScript los conjuntos de valores (como listaLI) siempre tienen índices que empiezan desde 0: el primer elemento tiene índice (posición) 0, el segundo tiene índice 1 y así sucesivamente.
Ahora que ya hemos visto cómo acceder a los distintos elementos LI, debemos precisar que con listaLI.item(i).value accedemos al atributo value del elemento LI: si el atributo value ya no existe, se crea y se le asigna un valor, si no, solo se modifica el valor.
Con la instrucción listaLI.item(i).value = i+1 fijamos el valor de value al valor del índice aumentado en una unidad (para compensar el hecho de que el índice empieza desde 0 mientras que los números de la lista lo hacen desde 1).
Seguramente has observado que, en este caso, hemos escrito i + 1 y no i+=1 o i+. Esto es así porque no estamos modificando el valor de i, sino que solo lo estamos utilizando (leyendo) y, de hecho, es la instrucción for la que se ocupa de gestionar el incremento de la variable índice en cada vuelta o bucle.
La consola
Sin embargo, si ejecutamos en el navegador este código, no percibimos su acción (estamos actuando a nivel de código HTML con una modificación que no tiene ningún impacto sobre el output de la página en el navegador).
¿Y cómo podemos ver el resultado de nuestro bucle for?
Una posibilidad consiste en leer el código fuente de la página del navegador. Para acceder al código fuente de la página, pulsa con el botón derecho del ratón en cualquier punto de la página y selecciona la opción “Ver código fuente” o similar (depende del navegador): ¡verás que el código HTML ha sido modificado por nuestro código JavaScript!
Una