Staff en línea
Últimos temas
[recursos] [javascript] como acceder a los elementos en una lista Origin10[Ocio] Contemos hasta el 5000
por Pegasus Dom Nov 17, 2019 3:10 pm

[recursos] [javascript] como acceder a los elementos en una lista Origin10[en curso] HTML para página de Staff
por Pegasus Sáb Nov 16, 2019 12:59 pm

[recursos] [javascript] como acceder a los elementos en una lista Origin10[Recursos] Paquetes de iconos
por Fibo Sáb Nov 09, 2019 9:46 pm

[recursos] [javascript] como acceder a los elementos en una lista
Tema iniciado por y Añadir a favoritos

staff
Para no usar jQuery, sino mantener el uso exclusivo de javascript puro o vanilla, al momento de acceder a los elementos de una lista usamos las siguientes opciones

Usamos loops, el primer caso for var

Código:

var divs = document.querySelectorAll('div'), len = divs.length;

for (var i=0; i<len; i++) {
    divs[i].style.color = "green";
}
Como se puede ver, la longitud de NodeList se determina antes del bucle. Este enfoque es más rápido que usar divs.length dentro de la instrucción for, ya que de lo contrario la longitud sería leída repetidamente para cada iteración.


Un loop while () inverso es un enfoque alternativo, incluso más eficiente y también implica menos código:

Código:

var divs = document.querySelectorAll('div'), i = divs.length;
while (i--) {
    divs[i].style.color = "green";
}

o de manera similar a utilizar .each de jQuery esta forEach:

Código:
var divs = document.querySelectorAll('div');

[].forEach.call(divs, function(item) {
    item.style.color = "green";
});

Si alguien quiere profundizar más en el tema con gusto les explico los métodos [recursos] [javascript] como acceder a los elementos en una lista 569027737
Chalo
Chalo

¿Que estoy pensando? :

saquen el wato..... [table class=fecha_up][td]Se modifico:8/11/19 - 9:09 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/374/37476.png


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

7022


Puntos :

9141


Me gusta :

1050


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


https://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.