Manipulons le DOM avec Javascript !

 

Dans le projet précédent, nous avons pu voir que nous devions dupliquer autant de fois les cartes que nous avions de personnages !

Grâce à Javascript, nous ne créons notre carte qu'une seule fois 😎

DRY : Don't Repeat Yourself !

Celle-ci sera dupliquée dans notre DOM autant de fois nécessaire en comptant le nombre de personnages dans un tableau que nous lui fournirons.

 

Projet fini sur CodePen ICI

 

 

Vidéo 1

Mise en place du projet et présentation du concept

 

 

Vidéo 2

Création de la carte élément par élément

 

 

Vidéo 3

Un peu d'interaction ? C'est possible ?

 

 

En résumé, nous avons vu :

 

Pour créer un élément :

const element = document.createElement("div");
element.classList.add("element-class");
parentElement.appendChild(element);

Nous le créons en spécifiant sa balise (div, footer, img...)

Nous lui ajoutons une classe CSS avec classList.add

Nous "l'injectons" dans son élément parent

Et hop ! il apparait !

 

Pour styliser un élément, on utilise

element.classList.methode_au_choix

add pour ajouter une classe CSS

remove pour retirer une classe CSS

toggle pour ajouter une classe CSS si elle n'est pas attribuée ou retirer si elle l'est à un élément donné.

 

Pour afficher/modifier le texte dans l'élément slectionné.

element.textContent= "texte à afficher"

 

NB : 

Le tableau étant d'une longueur indéfinie, et potentiellement variable de surcroît, nous bouclons dessus avec la méthode "forEach" et non "for" qui demanderait un tableau de longueur fixe.

Il est indispensable de connaître les méthodes courantes de manipulation des tableaux en javascript !

for, forEach, for...in, for...of, map, push, pop, shift, unshift, reduce, indexOf, splice, slice....
De quoi s'occuper un moment mais Ô combien utiles et facilitantes !

A bientôt Compagnon de Code