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 ]
Lundi 18 mars 2019 - Semaine 12 - Saint Cyrille de Jérusalem (Demain: Saint Joseph)
Aujourd'hui, c'est l'anniversaire de Luc Besson (1959-60 ans), réalisateur et producteur français, de Xavier Deluc (1958), acteur français et de Laetitia Hallyday (1975). Autre 18 mars: 1314 : supplice de Jacques de Molay, grand maître des Templiers.
Haut de page Easy-Micro