Manipulation du DOM en JavaScript
Soit le fichier HTML :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mon titre</title>
<script type="text/javascript" src="lib.js"></script>
</head>
<body>
<h1 onClick="showHxContent(1)">Partie 1</h1>
<div id="title1" style="display:none">
<p>Mon premier paragraphe</p>
<p>Mon second paragraphe</p>
</div>
<h1 onClick="showHxContent(2)">Partie 2</h1>
<div id="title2" style="display:none">
<p>Mon premier paragraphe</p>
<p>Mon second paragraphe</p>
</div>
<p>
<input type="submit" value="Masquer" onClick="hideAllDivs()"/>
</p>
<p>
Titre n°: <input type="text" id="title"/>
<input type="submit" value="Afficher" onClick="alertTitle()"/>
</p>
</body>
</html>
Question
Écrire la fonction JavaScript showHxContent
permettant d'afficher le contenu du div
correspondant au titre sur lequel on clique.
Indice
function showHxContent (pNumber) {
vDiv = document.getElementById(...);
vDiv.style.display = "...";
}
Solution
function showHxContent (pNumber) {
vDiv = document.getElementById("title" + pNumber);
vDiv.style.display = "block";
}
Question
Écrire la fonction JavaScript hideAllDivs
permettant de masquer le contenu de tous les div
du document.
Indice
function hideAllDivs () {
vDivs = document.getElementsByTagName(...);
for (var i=0; i<vDivs...; i++) {
vDivs.item(i)...;
}
}
Solution
function hideAllDivs () {
vDivs = document.getElementsByTagName("div");
for (var i=0; i<vDivs.length; i++) {
vDivs.item(i).style.display="none";
}
}
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
function alertTitle () {
vHx = document.getElementsByTagName(...);
vIndice = document.getElementById(...).value;
vIndice = vIndice - 1;
alert(...);
}
Solution
function alertTitle () {
vHx = document.getElementsByTagName("h1");
vIndice = document.getElementById("title").value;
vIndice = vIndice - 1;
alert(vHx.item(vIndice).firstChild.data);
}
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
function deleteTitle () {
...
vHx.item(vIndice).removeChild(...);
}
Solution
function deleteTitle () {
vHx = document.getElementsByTagName("h1");
vIndice = document.getElementById("title").value;
vIndice = vIndice - 1;
vHx.item(vIndice).removeChild(vHx.item(vIndice).firstChild);
}
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
function defineTitle () {
...
vText = document.createTextNode(...);
if (vHx.item(vIndice)...) {
...
}
vHx.item(vIndice).appendChild(...);
}
Solution
function defineTitle () {
vHx = document.getElementsByTagName("h1");
vIndice = document.getElementById("title").value;
vIndice = vIndice - 1;
vText = document.createTextNode("Nouveau titre");
if (vHx.item(vIndice).hasChildNodes()) {
vHx.item(vIndice).removeChild(vHx.item(vIndice).firstChild);
}
vHx.item(vIndice).appendChild(vText);
}