DOM et JavaScriptProcédures
Deux exemples de procédure pour accéder aux nœuds
Accéder aux nœuds
L'idéal est d'utiliser les méthodes getElementById ou getElementByTagName pour se rapprocher de l'élément et, à partir de là, utiliser les propriétés firstChild, parentNode etc.. pour accéder à l'élément souhaité.Exemple: afficher le texte compris entre les balises <h1> et </h1>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<script>
//<![CDATA[
function valeur() {
let y = document.getElementById("texte");
let x = document.getElementById("titre").firstChild;
// fistChild car le texte est aussi un nœud
y.value = x.nodeValue; // soit la valeur du nœud
}
//]]>
</script>
</head>
<body onclick="valeur();">
<h1 id="titre">Titre de niveau 1</h1>
Réponse : <input id="texte" type="text">
</body>
</html>Au clic sur le document, affiche dans le champ texte, le texte compris entre les balises <h1> et </h1>.
Accéder aux nœuds
Exemple: afficher dans une balise div, le texte contenu dans la première colonne d'un tableau, sachant que l'identifiant est placé au niveau de la seconde balise <td>, donc sur la deuxième colonne.<!doctype html>
<html lang="fr">
<head>
<script>
//<![CDATA[
function valeur() {
let y = document.getElementById("texte");
let x = document.getElementById("di").previousSibling.firstChild;
y.innerHTML = x.nodeValue;
}
//]]>
</script>
</head>
<body>
<table border="1">
<tr>
<td>Cellule 1</td>
<td id="di">Cellule 2</td>
<td>Cellule 3</td>
</tr>
</table>
<input type="button" value="Tester" onclick="valeur();">
Réponse : <div id="texte"/></div>
</body>
</html>Le premier td du tableau est atteind par la propriété previousSibling. Le texte est atteind par firstChild et affiché par la propriété nodeValue.
L'écriture suivante est également valable:
document.getElementById("di").parentNode.firstChild.firstChild;
ou biendocument.getElementById("di").parentNode.childNodes[0].firstChild;
Pour modifier le contenu de la balise div, est utilisé la propriété innetHTML. Cette propriété - qui permet de changer le contenu d'une balise - a été introduite par Internet Explorer et reprise par l'ensemble des navigateurs mais son implémentation peut dans certaines situations donner des résultats différents.
