Exercices DOM
Open Source Your Knowledge, Become a Contributor
Technology knowledge has to be shared and made accessible for free. Join the movement.
Exercice 1
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.
- Selectionnez le premier fils de l'élèment
body
et modifiez son contenu enRick Astley - Never Gonna Give You Up
.- 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
- Utilisez
firstElementChild
ref pour sélectionner le premierElement
d'un Node. - Utilisez
firstChild
ref pour sélectionner le premierNode
d'un Node. - Utilisez
childNodes
ref pour sélectionner les sous-Node
s d'un Node. - Utilisez
document.getElementById("un_id")
ref pour récuperer un élément ayant pour idun_id
. - Pour sélectionner tous les éléments qui possèdent une classe, utilisez
document.getElementsByClassName("nom_classe")
ref oudocument.querySelectorAll(".nom_classe")
ref
Attention, ces fonctions retournent un tableau. - Utilisez
parent.removeChild(enfant)
ref afin de supprimer un élémentenfant
d'un élémentparent
. - Faites attention lorsque vous modifiez les elements d'une liste lors de son parcours.
- Utilisez
parent.appendChild(child)
ref pour ajouter un element.
Attention, appendChild n'accepte que desNode
. Il faut donc les créer, ce qui peut se faire avecdocument.createElement()
ref pour créer unElement
etdocument.createTextNode("un texte")
ref pour créer un noeud de typeText
contenantun texte
.
Lors de l'éxecution, il peux vous afficher une erreur, re-executer à nouveau regle généralement le problème.
Exercice 1
Open Source Your Knowledge: become a Contributor and help others learn. Create New Content
1
2
3
4
5
6
7
8
9
10
// 1.
// 2.
// 3.
// 4.
// 5.
Enter to Rename, Shift+Enter to Preview
1
<!DOCTYPE html>
Enter to Rename, Shift+Enter to Preview