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
bodyet modifiez son contenu enRick Astley - Never Gonna Give You Up.- Sélectionnez tous les éléments possèdant la classe
coupletet 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
firstElementChildref pour sélectionner le premierElementd'un Node. - Utilisez
firstChildref pour sélectionner le premierNoded'un Node. - Utilisez
childNodesref pour sélectionner les sous-Nodes 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émentenfantd'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 unElementetdocument.createTextNode("un texte")ref pour créer un noeud de typeTextcontenantun 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.
Press desired key combination and then press ENTER.
1
<!DOCTYPE html>
Press desired key combination and then press ENTER.