Comment parcourir correctement getElementsByClassName

Question 1

Je suis débutant en Javascript.

J'ouvre la page Web via le window.onload, je dois trouver un tas d'éléments par leur nom de classe ( slide) et les redistribuer dans différents nœuds en fonction d'une logique. J'ai une fonction Distribute(element)qui prend un élément comme entrée et fait la distribution. Je veux faire quelque chose comme ça (comme indiqué par exemple ici ou ici ):

var slides = getElementsByClassName("slide");
for(var i = 0; i < slides.length; i++)
{
   Distribute(slides[i]);
}

cependant cela ne fait pas la magie pour moi, car getElementsByClassNamene renvoie pas réellement de tableau, mais un NodeList, qui est ...

... c'est ma spéculation ...

... en cours de modification à l'intérieur de la fonction Distribute(l'arborescence DOM est modifiée à l'intérieur de cette fonction et le clonage de certains nœuds se produit). For-eachla structure en boucle n'aide pas non plus.

Les diapositives variables agissent de manière vraiment non déterministe, à chaque itération, elles changent énormément la longueur et l'ordre des éléments.

Quelle est la bonne façon d'itérer dans NodeList dans mon cas? Je pensais remplir un tableau temporaire, mais je ne sais pas comment faire cela ...

ÉDITER:

fait important que j'ai oublié de mentionner est qu'il pourrait y avoir une diapositive dans une autre, c'est en fait ce qui change la slidesvariable comme je viens de le découvrir grâce à l'utilisateur Alohci .

La solution pour moi était de cloner chaque élément dans un tableau d' abord et passer le tableau ono par un dans la Distribute()suite.

Question 2

Selon MDN, la façon de récupérer un élément à partir d'un NodeListest:

nodeItem = nodeList.item(index)

Donc:

var slides = document.getElementsByClassName("slide");
for (var i = 0; i < slides.length; i++) {
   Distribute(slides.item(i));
}

Je n'ai pas essayé moi-même (la forboucle normale a toujours fonctionné pour moi), mais essayez-le .

Question 3

Si vous utilisez le nouveau querySelectorAll, vous pouvez appeler forEach directement.

document.querySelectorAll('.edit').forEach(function(button) {
    // Now do something with my button
});

Par le commentaire ci-dessous. Les listes de nœuds n'ont pas de fonction forEach.

Si vous l'utilisez avec babel, vous pouvez ajouter Array.fromet cela convertira les listes sans nœuds en un tableau forEach. Array.fromne fonctionne pas de manière native dans les navigateurs ci-dessous et y compris IE 11.

Array.from(document.querySelectorAll('.edit')).forEach(function(button) {
    // Now do something with my button
});

Lors de notre rencontre d'hier soir, j'ai découvert une autre façon de gérer les listes de nœuds n'ayant pas forEach

[...document.querySelectorAll('.edit')].forEach(function(button) {
    // Now do something with my button
});

Prise en charge du navigateur pour [...]

Affichage sous forme de liste de nœuds

Affichage sous forme de tableau

Question 4

Vous pouvez toujours utiliser des méthodes de tableau:

var slides = getElementsByClassName("slide");
Array.prototype.forEach.call(slides, function(slide, index) {
    Distribute(slides.item(index));
});

Question 5

J'ai suivi la recommandation d' Alohci de boucler à l'envers car c'est un live nodeList. Voici ce que j'ai fait pour ceux qui sont curieux ...

  var activeObjects = documents.getElementsByClassName('active'); // a live nodeList

  //Use a reverse-loop because the array is an active NodeList
  while(activeObjects.length > 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);
  }

Question 6

 <!--something like this--> 
<html>
<body>



<!-- i've used for loop...this pointer takes current element to apply a 
 particular change on it ...other elements take change by else condition 
-->  


<div class="classname" onclick="myFunction(this);">first</div>  
<div class="classname" onclick="myFunction(this);">second</div>


<script>
function myFunction(p) {
 var x = document.getElementsByClassName("classname");
 var i;
 for (i = 0; i < x.length; i++) {
    if(x[i] == p)
    {
x[i].style.background="blue";
    }
    else{
x[i].style.background="red";
    }
}
}


</script>
<!--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() ...-->




var variable_name=document.querySelectorAll('.classname');
for(var i=0;i<variable_name.length;i++){
variable_name[i].(--your option--);
}



 <!--if u like to divide it on some logic apply it inside this for loop 
 using your nodelist-->

</body>
</html>

Question 7

J'ai eu un problème similaire avec l'itération et j'ai atterri ici. Peut-être que quelqu'un d'autre fait aussi la même erreur que moi.

Dans mon cas, le sélecteur n'était pas du tout le problème. Le problème était que j'avais gâché le code javascript: j'avais une boucle et une sous-boucle. La sous-boucle était également utilisée icomme compteur, au lieu de j, donc parce que la sous-boucle remplaçait la valeur de ide la boucle principale, celle-ci n'a jamais atteint la deuxième itération.

var dayContainers = document.getElementsByClassName('day-container');
for(var i = 0; i < dayContainers.length; i++) { //loop of length = 2
        var thisDayDiv = dayContainers[i];
        // do whatever

        var inputs = thisDayDiv.getElementsByTagName('input');

        for(var j = 0; j < inputs.length; j++) { //loop of length = 4
            var thisInput = inputs[j];
            // do whatever

        };

    };