EXERCICES DOM JAVASCRIPT
Absolument ! Voici quelques exercices avec des questions et du code HTML pour vous
entraîner à manipuler le DOM en JavaScript :
Exercice 1: Navigation de base
HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Exercice 1</title>
</head>
<body>
<div id="parent">
<p id="enfant1">Premier paragraphe</p>
<p id="enfant2">Deuxième paragraphe</p>
<ul id="liste">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<script src="[Link]"></script>
</body>
</html>
Questions:
1. Sélectionnez l'élément avec l'id "parent" et stockez-le dans une variable.
2. Affichez dans la console le premier enfant de cet élément en utilisant
firstChild et firstElementChild. Quelle est la différence entre les deux?
3. Affichez dans la console le dernier enfant de cet élément en utilisant lastChild
et lastElementChild. Quelle est la différence entre les deux?
4. Affichez dans la console le nœud parent de l'élément avec l'id "enfant2" en
utilisant parentNode et parentElement. Quelle est la différence entre les
deux?
Exercice 2: Exploration des enfants
HTML: (Utilisez le même code HTML que pour l'exercice 1)
Questions:
1. Sélectionnez l'élément avec l'id "liste" et stockez-le dans une variable.
2. Utilisez childNodes pour obtenir la collection de tous les nœuds enfants de cet
élément. Combien y a-t-il de nœuds enfants? Quels sont leurs types?
3. Utilisez children pour obtenir la collection de tous les éléments enfants de cet
élément. Combien y a-t-il d'éléments enfants?
4. Parcourez la collection children à l'aide d'une boucle for et affichez le texte
de chaque élément enfant dans la console.
Exercice 3: Navigation entre frères
HTML: (Utilisez le même code HTML que pour l'exercice 1)
Questions:
1. Sélectionnez l'élément avec l'id "enfant2" et stockez-le dans une variable.
2. Affichez dans la console le nœud frère suivant de cet élément en utilisant
nextSibling et nextElementSibling. Quelle est la différence entre les deux?
3. Affichez dans la console le nœud frère précédent de cet élément en utilisant
previousSibling et previousElementSibling. Quelle est la différence entre
les deux?
Exercice 4: Chaîne de navigation
HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Exercice 4</title>
</head>
<body>
<div>
<table>
<tr>
<td>
<p id="cible">Texte cible</p>
</td>
</tr>
</table>
</div>
<script src="[Link]"></script>
</body>
</html>
Absolument ! Voici quelques exercices avec des questions et du code
HTML pour vous entraîner à manipuler le DOM en JavaScript :
Exercice 1: Navigation de base
HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Exercice 1</title>
</head>
<body>
<div id="parent">
<p id="enfant1">Premier paragraphe</p>
<p id="enfant2">Deuxième paragraphe</p>
<ul id="liste">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<script src="[Link]"></script>
</body>
</html>
Questions:
1. Sélectionnez l'élément avec l'id "parent" et stockez-le dans
une variable.
2. Affichez dans la console le premier enfant de cet élément en
utilisant firstChild et firstElementChild. Quelle est la
différence entre les deux?
3. Affichez dans la console le dernier enfant de cet élément en
utilisant lastChild et lastElementChild. Quelle est la
différence entre les deux?
4. Affichez dans la console le nœud parent de l'élément avec l'id
"enfant2" en utilisant parentNode et parentElement. Quelle est
la différence entre les deux?
Exercice 2: Exploration des enfants
HTML: (Utilisez le même code HTML que pour l'exercice 1)
Questions:
1. Sélectionnez l'élément avec l'id "liste" et stockez-le dans
une variable.
2. Utilisez childNodes pour obtenir la collection de tous les
nœuds enfants de cet élément. Combien y a-t-il de nœuds
enfants? Quels sont leurs types?
3. Utilisez children pour obtenir la collection de tous les
éléments enfants de cet élément. Combien y a-t-il d'éléments
enfants?
4. Parcourez la collection children à l'aide d'une boucle for et
affichez le texte de chaque élément enfant dans la console.
Exercice 3: Navigation entre frères
HTML: (Utilisez le même code HTML que pour l'exercice 1)
Questions:
1. Sélectionnez l'élément avec l'id "enfant2" et stockez-le dans
une variable.
2. Affichez dans la console le nœud frère suivant de cet élément
en utilisant nextSibling et nextElementSibling. Quelle est la
différence entre les deux?
3. Affichez dans la console le nœud frère précédent de cet
élément en utilisant previousSibling et
previousElementSibling. Quelle est la différence entre les
deux?
Exercice 4: Chaîne de navigation
HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Exercice 4</title>
</head>
<body>
<div>
<table>
<tr>
<td>
<p id="cible">Texte cible</p>
</td>
</tr>
</table>
</div>
<script src="[Link]"></script>
</body>
</html>
Questions:
1. Sélectionnez l'élément avec l'id "cible" et stockez-le dans
une variable.
2. Remontez dans l'arbre DOM jusqu'à l'élément <html> en
utilisant une combinaison des propriétés de navigation.
3. Affichez le nom de chaque élément rencontré lors de la
navigation dans la console.
Exercice 5: Modification du contenu
HTML: (Utilisez le même code HTML que pour l'exercice 1)
Questions:
1. Sélectionnez l'élément avec l'id "parent" et stockez-le dans
une variable.
2. Accédez à l'élément avec l'id "enfant1" en utilisant les
propriétés de navigation.
3. Modifiez le contenu textuel de cet élément en utilisant
textContent pour ajouter le texte " (modifié)".