Easy-Micro


ESPACEMEMBRE DOM et JavaScript
Procédure

Exemple de procédure pour 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>
<html>
<head>
<script type="text/javascript">
//<![CDATA[
function valeur() {
var y = document.getElementById("texte");
var 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>.

DOM Javascript

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.
<html>
<head>
<script type="text/javascript">
//<![CDATA[
function valeur() {
var y = document.getElementById("texte");
var 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.

Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mardi 22 janvier 2019 - Semaine 04 - Saint Vincent (Demain: Saint Barnard)
Aujourd'hui, c'est l'anniversaire de Frank Leboeuf (1968-51 ans), footballeur français (défenseur). Autre 22 janvier: 1981 - Début de la série américaine Dallas sur les écrans français (TF1).
Haut de page Easy-Micro