DOM de base

Fonctions de base à tester dans la console de http://dupontcours.free.fr/JavaScript/DOM-javascript/dom.html

🆒Sélectionnez tous les paragraphes

1. const articles = document.querySelectorAll("p");

Comptez le nombre de paragraphes

1. const articles = document.querySelectorAll("p");
2. console.log(articles.length)

Une boucle sur la selection des paragraphes

1. const articles = document.querySelectorAll("p");
2. for (let article of articles) {
3.         console.log(article.innerText.split(" ").length); // count words
4. }

1️⃣Ajouter une classe à tous les paragraphes

1. const articles = document.querySelectorAll("p");
2. for (let article of articles) {
3.     article.classList.add("second");
4. }

🪛Ajoutez un événement click (voir amélioration par délégation)

1. const articles = document.querySelectorAll("p");
2. for (let para of articles) {
3.   para.addEventListener("click", () => {
4.     para.classList.add("selected");
5.   });
6. }

🥷Somme des valeurs contenu dans l'attribut data-code

1. let value = 0;
2. for (let para of articles) {
3.   value+= parseInt(para.dataset.code) // parseInt transforme la valeur en entier !
4. }
5. console.log(value)

Affichez le résultat dans un div.

1. let value = 0;
2. for (let para of articles) {
3.   value+= parseInt(para.dataset.code) // parseInt transforme la valeur en entier !
4. }
5. document.querySelector("div").innerText = value

🥇La délégation 

1. const fun = function (event) {
2.   const targetElement = event.target; // p or em
3. 
   
4.   if (targetElement.closest("p")) {
5.     let para = targetElement.closest("p");
6.     para.classList.toggle("selected");
7.   }
8. };
9. 
   
10. const parent = document.querySelector(".container");
11. parent.addEventListener("click", fun, false);

See the Pen Untitled by dupont (@dupontcodepen) on CodePen.