Fonctions de base à tester dans la console de http://dupontcours.free.fr/JavaScript/DOM-javascript/dom.html
🆒Sélectionnez tous les paragraphes
- const articles = document.querySelectorAll("p");
Comptez le nombre de paragraphes
- const articles = document.querySelectorAll("p");
- console.log(articles.length)
Une boucle sur la selection des paragraphes
- const articles = document.querySelectorAll("p");
- for (let article of articles) {
- console.log(article.innerText.split(" ").length); // count words
- }
1️⃣Ajouter une classe à tous les paragraphes
- const articles = document.querySelectorAll("p");
- for (let article of articles) {
- article.classList.add("second");
- }
🪛Ajoutez un événement click (voir amélioration par délégation)
- const articles = document.querySelectorAll("p");
- for (let para of articles) {
- para.addEventListener("click", () => {
- para.classList.add("selected");
- });
- }
🥷Somme des valeurs contenu dans l'attribut data-code
- let value = 0;
- for (let para of articles) {
- value+= parseInt(para.dataset.code) // parseInt transforme la valeur en entier !
- }
- console.log(value)
Affichez le résultat dans un div.
- let value = 0;
- for (let para of articles) {
- value+= parseInt(para.dataset.code) // parseInt transforme la valeur en entier !
- }
- document.querySelector("div").innerText = value
🥇La délégation
- const fun = function (event) {
- const targetElement = event.target; // p or em
- if (targetElement.closest("p")) {
- let para = targetElement.closest("p");
- para.classList.toggle("selected");
- }
- };
- const parent = document.querySelector(".container");
- parent.addEventListener("click", fun, false);
See the Pen Untitled by dupont (@dupontcodepen) on CodePen.
