Comment parcourir efficacement les éléments sélectionnés à l'aide de document.querySelectorAll ?

Parcourir les éléments sélectionnés avec l'approche efficace document.querySelectorAll

document.querySelectorAll offre un moyen puissant de sélectionner plusieurs éléments en fonction de critères spécifiés. Cependant, les développeurs rencontrent souvent des difficultés lorsqu'il s'agit d'itérer efficacement sur les éléments sélectionnés.

Lors de l'utilisation de la boucle for..in conventionnelle, il est crucial d'être conscient que l'objet renvoyé comprend trois propriétés supplémentaires : item() , nomméItem() et longueur. Pour éviter les inclusions involontaires dans votre boucle, envisagez d'utiliser une approche plus efficace.

Techniques de boucle alternatives

Pour garantir une expérience de boucle plus précise, envisagez les techniques alternatives suivantes :

• forEach avec la syntaxe spread : En convertissant l'objet NodeList renvoyé par document.querySelectorAll en un tableau utilisant la syntaxe spread, vous pouvez facilement utiliser la méthode forEach pour parcourir chaque élément.

var div_list = document.querySelectorAll('div');
var div_array = [...div_list];
div_array.forEach(div => {
  // Do something with each div
});

• Array.from() : Vous pouvez également utiliser la méthode Array.from() pour créer un nouveau tableau à partir de NodeList.

var divs = Array.from(document.querySelectorAll('div'));
divs.forEach(div => {
  // Do something with each div
});

Ces techniques offrent une expérience de boucle plus raffinée, éliminant les propriétés inutiles et vous permettant de vous concentrer sur l'interaction avec les éléments sélectionnés eux-mêmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!