Exercices DOM

stardisblue

34.5K views

GitHub

Edit

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

Exercice 5

Suite à un oubli de la part du créateur de l'exercice plusieurs erreurs n'ont pas été corrigés sur la page.

Il en revient à vous pour corriger les erreurs qui y sont glissés.

Remarque : Le fichier index.html est en lecture seule et n'est affiché qu'à titre indicatif. Vous ne pouvez agir sur ce fichier qu'en javascript.
Les exercices 5, 6, 7, 8 sont les mêmes que les exercices 1, 2, 3, 4. Sauf qu'au lieu d'utiliser les fonctions de selections natifs, nous utiliserons les fonctionnalités de D3

Selectionnez le titre et modifiez son contenu en Rick Astley - Never Gonna Give You Up en utilisantd3.select.

Sélectionnez tous les éléments possèdant la classe couplet et supprimer la première ligne qui est en double.
N'oubliez pas de supprimer le <br /> qui cause le retour à la ligne

Le refrain s'est dupliqué à cause de l'écho. Supprimez les occurences en double.
N'oubliez pas de supprimer le <br /> qui cause le retour à la ligne

Maintenant que toutes les erreurs ont été corrigées, supprimer l'élément ayant pour id erreur

Ajoutez en bas de la page (dernier element de <body>), un <footer> contenant © Copyright 2020 - Nom

Conseils

d3 suit une logique differente que celle de la manipulation de DOM en natif. Inspirez vous des commentaires dans l'index.js
Utilisez d3.select("balise") pour sélectionner un element.
Utilisez d3.select("#un_id")^ref pour récuperer un élément ayant pour id un_id.
Pour sélectionner tous les éléments qui possèdent une classe, utilisez d3.selectAll(".nom_classe")^ref Attention, ces fonctions retournent un tableau.
Dans le cas où vous n'arrivez pas effectuer une operation avec d3, vous pouvez récuperer l'Element d'un objet d3 "selection" en utilisant selection.node()^ref
Utilisez selection.remove()^ref pour supprimer les elements sélectionnés.
Faites attention lorsque vous modifiez les elements d'une liste lors de son parcours.
Utilisez selection.append(enfant)^ref pour créer un element et l'ajouter à la selection.
Attention, appendChild n'accepte que des Node. Il faut donc les créer, ce qui peut se faire avec d3.create()^ref pour créer un Element et document.createTextNode("un texte")^ref pour créer un noeud de type Text contenant un texte.

Lors de l'éxecution, il peux vous afficher une erreur, re-executer à nouveau regle généralement le problème.

Exercice 5

Open Source Your Knowledge: become a Contributor and help others learn. Create New Content

// 1
// on selectionne un element, on ajoute text
// d3.select('element').text('text');
// 2
// on selectionne tous les objets de la classe "une-classe"
d3.selectAll('.une-classe').each(function () {
  // on applique cette operation pour chacun d'entre eux
  // "this" correspond à l'élement selectionné. par exemple: <p>
  console.log(this);
  // le but est de supprimer les deux premiers noeuds
  // indice : "this.firstChild" ou "this.childNodes[0]"
  // ps, n'oubliez pas le <br> en trop
  // pour supprimer un objet:
  //d3.select(objet).remove();
});
// 3
// on selectionne tous elements de une-classe
d3.selectAll('.une-classe').each(function () {
  // pour chacun d'entre eux on sélectionne leur noeuds enfant
  d3.selectAll(A_COMPLETER)
    // on filtre les noeuds sélectionnés pour ne garder que les doublons
    .filter((_d, i) => Math.floor(i / 2) % 2 === 0)
    // on les supprime
    .remove();
});
// 4

Open Source Your Knowledge, Become a Contributor

5/8 1. Selection, suppression d'element

Exercice 5

Introduction à JavaScript - WOA JS

Introduction à JavaScript - Module M2206 - MMI1

The State of CSS Specificity, Part 2

The State of CSS Specificity, Part 3