Easy-Micro

ESPACEMEMBRE DOM et JavaScript
Procé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 bien
document.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.


< Page précédente DOM ET JAVASCRIPT Page suivante >