How to correctly iterate through getElementsByClassName

Question

I am Javascript beginner   I am initing web page via the window onload  I have to find bunch of elements by their class name  slide  and redistribute them into different nodes based on some logic  I have function Distribute element  which takes an element as input and does the distribution  I want to do something like this  as outlined for example here or here    var slides   getElementsByClassName  slide    for var i   0  i  lt  slides length  i         Distribute slides i        however this does not do the magic for me  because getElementsByClassName does not actually return array  but a NodeList  which is         this is my speculation        being changed inside function Distribute  the DOM tree is being changed inside this function  and cloning of certain nodes happen   For-each loop structure does not help either   The variable slides act s really un-deterministicaly  through every iteration it changes it s length and order of elements wildly   What is the correct way to iterate through NodeList in my case  I was thinking about filling some temporary array  but am not sure how to do that     EDIT   important fact I forgot to mention is that there might be one slide inside another  this is actually what changes the slides variable as I have just found out thanks to user Alohci   The solution for me was to clone each element into an array first and pass the array ono-by-one into Distribute   afterwards

User · Answer

lt  --something like this-- gt    lt html gt   lt body gt      lt  -- i ve used for loop   this pointer takes current element to apply a   particular change on it    other elements take change by else condition  -- gt       lt div class  classname  onclick  myFunction this    gt first lt  div gt     lt div class  classname  onclick  myFunction this    gt second lt  div gt     lt script gt  function myFunction p     var x   document getElementsByClassName  classname     var i   for  i   0  i  lt  x length  i          if x i     p        x i  style background  blue             else  x i  style background  red                lt  script gt   lt  --this script will only work for a class with onclick event but if u want  to use all class of same name then u can use querySelectorAll      -- gt      var variable name document querySelectorAll   classname    for var i 0 i lt variable name length i     variable name i   --your option--          lt  --if u like to divide it on some logic apply it inside this for loop   using your nodelist-- gt    lt  body gt   lt  html gt

User · Answer

I followed Alohci s recommendation of looping in reverse because it s a live nodeList   Here s what I did for those who are curious       var activeObjects   documents getElementsByClassName  active       a live nodeList      Use a reverse-loop because the array is an active NodeList   while activeObjects length  gt  0        var lastElem   activePaths activePaths length-1     select the last element        Remove the  active  class from the element          This will automatically update the nodeList s length too      var className   lastElem getAttribute  class   replace  active           lastElem setAttribute  class   className

User · Answer

You could always use array methods   var slides   getElementsByClassName  slide    Array prototype forEach call slides  function slide  index        Distribute slides item index

User · Answer

I had a similar issue with the iteration and I landed here  Maybe someone else is also doing the same mistake I did  In my case  the selector was not the problem at all  The problem was that I had messed up the javascript code  I had a loop and a subloop  The subloop was also using i as a counter  instead of j  so because the subloop was overriding the value of i of the main loop  this one never got to the second iteration  var dayContainers   document getElementsByClassName  day-container    for var i   0  i  lt  dayContainers length  i        loop of length   2         var thisDayDiv   dayContainers i              do whatever          var inputs   thisDayDiv getElementsByTagName  input             for var j   0  j  lt  inputs length  j        loop of length   4             var thisInput   inputs j                  do whatever

User · Answer

If you use the new querySelectorAll you can call forEach directly   document querySelectorAll   edit   forEach function button           Now do something with my button       Per the comment below  nodeLists do not have a forEach function   If using this with babel you can add Array from and it will convert non node lists to a forEach array  Array from does not work natively in browsers below and including IE 11    Array from document querySelectorAll   edit    forEach function button           Now do something with my button       At our meetup last night I discovered another way to handle node lists not having forEach      document querySelectorAll   edit    forEach function button           Now do something with my button       Browser Support for        Showing as Node List    Showing as Array

User · Answer

According to MDN  the way to retrieve an item from a NodeList is   nodeItem   nodeList item index    Thus   var slides   document getElementsByClassName  slide    for  var i   0  i  lt  slides length  i         Distribute slides item i        I haven t tried this myself  the normal for loop has always worked for me   but give it a shot

[javascript] How to correctly iterate through getElementsByClassName

Examples related to javascript

Examples related to html

Examples related to dom