Manipulation du DOM en JavaScript

Soit le fichier HTML :

1
<html>
2
<head>
3
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4
<title>Mon titre</title>
5
<script type="text/javascript" src="lib.js"></script>
6
</head>
7
<body>
8
<h1 onClick="showHxContent(1)">Partie 1</h1>
9
<div id="title1" style="display:none">
10
<p>Mon premier paragraphe</p>
11
<p>Mon second paragraphe</p>
12
</div>
13
<h1 onClick="showHxContent(2)">Partie 2</h1>
14
<div id="title2" style="display:none">
15
<p>Mon premier paragraphe</p>
16
<p>Mon second paragraphe</p>
17
</div>
18
<p>
19
<input type="submit" value="Masquer" onClick="hideAllDivs()"/>
20
</p>
21
<p>
22
Titre n°: <input type="text" id="title"/>
23
<input type="submit" value="Afficher" onClick="alertTitle()"/>
24
</p>
25
</body>
26
</html>

Question

Écrire la fonction JavaScript showHxContent permettant d'afficher le contenu du div correspondant au titre sur lequel on clique.

Indice

1
function showHxContent (pNumber) {
2
vDiv = document.getElementById(...);
3
vDiv.style.display = "...";
4
}

Solution

1
function showHxContent (pNumber) {
2
vDiv = document.getElementById("title" + pNumber);
3
vDiv.style.display = "block";
4
}

Question

Écrire la fonction JavaScript hideAllDivs permettant de masquer le contenu de tous les div du document.

Indice

1
function hideAllDivs () {
2
vDivs = document.getElementsByTagName(...);
3
for (var i=0; i<vDivs...; i++) {
4
vDivs.item(i)...;
5
}
6
}

Solution

1
function hideAllDivs () {
2
vDivs = document.getElementsByTagName("div");
3
for (var i=0; i<vDivs.length; i++) {
4
vDivs.item(i).style.display="none";
5
}
6
}

Question

Écrire la fonction alertTitle permettant d'afficher (avec la fonction JavaScript alert) le contenu du énième titre, défini par le champ de saisie title.

Indice

1
function alertTitle () {
2
vHx = document.getElementsByTagName(...);
3
vIndice = document.getElementById(...).value;
4
vIndice = vIndice - 1;
5
alert(...);
6
}

Solution

1
function alertTitle () {
2
vHx = document.getElementsByTagName("h1");
3
vIndice = document.getElementById("title").value;
4
vIndice = vIndice - 1;
5
alert(vHx.item(vIndice).firstChild.data);
6
}

Question

Écrire la fonction deleteTitle permettant d'effacer le contenu du titre défini par le champ title. (suppression du nœud fils de type texte)

Indice

1
function deleteTitle () {
2
...
3
vHx.item(vIndice).removeChild(...);
4
}

Solution

1
function deleteTitle () {
2
vHx = document.getElementsByTagName("h1");
3
vIndice = document.getElementById("title").value;
4
vIndice = vIndice - 1;
5
vHx.item(vIndice).removeChild(vHx.item(vIndice).firstChild);
6
}

Question

Écrire la fonction defineTitle permettant d'affecter le contenu du titre défini par le champ title avec la valeur "Nouveau titre". On testera que le titre a ou non déjà une valeur (nœud texte) avant l'ajout, afin de la supprimer si besoin.

Indice

1
function defineTitle () {
2
...
3
vText = document.createTextNode(...);
4
if (vHx.item(vIndice)...) {
5
  ...
6
}
7
vHx.item(vIndice).appendChild(...);
8
}

Solution

1
function defineTitle () {
2
vHx = document.getElementsByTagName("h1");
3
vIndice = document.getElementById("title").value;
4
vIndice = vIndice - 1;
5
vText = document.createTextNode("Nouveau titre");
6
if (vHx.item(vIndice).hasChildNodes()) {
7
  vHx.item(vIndice).removeChild(vHx.item(vIndice).firstChild);
8
}
9
vHx.item(vIndice).appendChild(vText);
10
}