JavaScript>Éléments dans un tableau -
Publié le : 08-03-2015 | Modifié le : N/A

Conversion d'une série d'éléments dans un tableau, en utilisant Array.prototype.slice.call()

Une fonction JavaScript puissante qui permet de lister des objets dans un tableau. Afin d'éviter de réécrire du code, il suffit de parser le tableau dans une boucle, et d'appliquer les modifs via une fonction, avec la possibilité de passer des paramètres.

Illustration par l'exemple.

Il est courant que vous deviez lister une série d'éléments HTML dans votre JavaScript pour y appliquer des Listener. Puis de devoir faire référence à cette même liste d'éléments, pour y appliquer une nouvelle série d'actions ou de modifications. C'est là que la fonction Array.prototype.slice.call() est utile car elle permet de faire un tableau de ces éléments et surtout de les garder sous forme d'objets.

<header id="pt-header">
<nav>
<ul>
<li><ahref="#"id="c0"class="vm-add">Action</a></li>
<li><ahref="#"id="c1"class="vm-add">Animation</a></li>
<li><ahref="#"id="c2"class="vm-add">Comédie</a></li>
<li><ahref="#"id="c3"class="vm-add">Guerre</a></li>
<li><ahref="#"id="c4"class="vm-add">Science-Fiction</a></li>
<li><ahref="#"id="c5"class="vm-add">Western</a></li>
<li><ahref="#"id="c6"class="vm-add">Drame</a></li>
<li><ahref="#"id="c7"class="vm-add">Horreur</a></li>
<li><ahref="#"id="c8"class="vm-add">Fantastique</a></li>
</ul>
</nav>
</header>
...
<scripttype="text/javascript">
varBTN0=document.getElementById('c0');
varBTN1=document.getElementById('c1');
varBTN2=document.getElementById('c2');
varBTN3=document.getElementById('c3');
varBTN4=document.getElementById('c4');
varBTN5=document.getElementById('c5');
varBTN6=document.getElementById('c6');
varBTN7=document.getElementById('c7');
varBTN8=document.getElementById('c8');
BTN0.addEventListener("click",change.bind(this,0),false);
BTN1.addEventListener("click",change.bind(this,1),false);
BTN2.addEventListener("click",change.bind(this,2),false);
BTN3.addEventListener("click",change.bind(this,3),false);
BTN4.addEventListener("click",change.bind(this,4),false);
BTN5.addEventListener("click",change.bind(this,5),false);
BTN6.addEventListener("click",change.bind(this,6),false);
BTN7.addEventListener("click",change.bind(this,7),false);
BTN8.addEventListener("click",change.bind(this,8),false);
</script>
</body>
</html>

Se transforme en :

<scripttype="text/javascript">
vartete=document.getElementById('pt-header'),
listSwitch=Array.prototype.slice.call(tete.querySelectorAll('nav > ul > li > a'));
listSwitch.forEach(function(el,i){
el.addEventListener("click", change.bind(this,i),false);
});
</script>

À noter el est l'élément sous forme d'objet, vous pouvez donc faire appel aux fonctions HTML DOM sur element object, comme el.getAttribute("id"); et modifier à l'envie les éléments ou faire passer des attributs comme le href ou des data-view dans la fonction du Listener.
i correspond à l'index dans le tableau.