Chapitres de cette page

Contenu ->

Page mise à jour le : 12-08-2015

Structure
Propriétés
Méthode item()
Méthodes
A suivre...

JavaScript, DOM, node

"node" n'est pas un objet du DOM mais une interface "classe", un type d'objet.

Un objet de type "node" représente un élément HTML.

"node", signifiant "noeud", est le type d'objet de base de l'arborescence de la page car un élément HTML peut en contenir un autre, etc.

Structure

Structure HTML

Tout élément HTML (associé à une balise) peut contenir :

d'autres éléments ;
des attributs ;
un contenu (texte).

Par exemple :

<div class='texte'>
    <h2 id='intro' align='center'>
        Introduction
    </h2>
    <p>
        Texte.....
    </p>
</div>

On voit que l'élément '"div" contient

un attribut 'class'
un élément 'h2' qui contient
- des attributs 'id' et 'align"
- un contenu 'Introduction'
un élément 'p' qui contient
- un contenu 'Texte.....'

Chaque élément a au plus un ancêtre.

Structure équivalente "node"

Il existe un objet de type "node" pour chaque élément HTML

Chacun de ces objets peut contenir :

d'autres objets "node" éléments ce sont des sous-objets du premier : noeud enfant ;
des objets "node"attributs ;
un objet "node" contenu (texte) : noeud enfant.

On remarque ainsi l'équivalence entre ces objets, manipulables en JavaScript, et la structure du document HTML.

Notons aussi que le contenu texte d'un noeud est aussi un noeud.

Dans la page sur les bases du DOM, on a vu au chapitre consacré à l'objet "document" qu'il était possible d'obtenir des objets "éléments HTML" qui sont de type "node" et que l'on pouvait intervenir sur les attributs facilement.

Avec les propriété et méthodes de "node" nous pourrons aller plus loin, en particulier créer de nouveaux éléments HTML dans la page depuis le JavaScript.

Propriétés

Voici quelques propriétés d'un noeud élément. Il n'est pas possible de les modifier sauf exception signalée.

childNodes est la liste des noeuds enfants de l'élément. Ce peut être des éléments ou des contenus.

firstChild premier noeud enfant. Peut valoir null si pas d'enfant.

lastChild dernier noeud enfant. Peut valoir null si pas d'enfant.

nextSibling noeud suivant (frère). Peut valoir null si pas de suivant.

nodeName nom du noeud.
Pour les noeuds élément c'est le nom en majuscules par exemple 'P' pour un paragraphe, 'DIV', etc.
Pour les noeuds attributs c'est le nom en minuscules par exemple "align", "id", "style", etc.
Pour les noeuds texte, il vaut '#text".

nodeType type du noeud : 1 pour noeud élément, 2 pour attribut, 3 pour texte.

nodeValue : contenu du noeud, intéressant pour les noeuds texte et attributs où cette propriété peut être modifiée. Vaut null pour les noeuds éléments.

data : valeur d'un noeud texte, équivalent à 'nodeValue'.

Voici un exemple :

<body>
<script type="text/javascript">

</script>
<p id="paragraphe">
    Voici un <span style="color: red;">lien</span> vers
    <a href="javascript:alert(Observe(document.getElementById('paragraphe')))">
        l'observation
    </a>
    d'éléments
</p>
</body>

Dans la partie HTML du bas est indiqué un paragraphe d'identifiant "paragraphe" qui contient du texte avec une section 'span' et un lien contenant aussi un texte "l'observation".

Remarquons dans ce listing, l'utilisation du mot 'var' qui indique que les variables 'texte' et 'noeud_enfant' sont locales à la fonction.
Cela est important dans une fonction récursive où chaque instance de la fonction doit avoir ses propres variables.

Ce lien appelle une fonction JavaScript "Observe" et lui passe en paramètre le noeud que l'on veut observer.

La fonction "Observe" parcourt les noeuds enfants de celui passé en paramètre et enregistre dans la variable locale "texte" le nom du noeud et son contenu.
S'il s'agit d'un noeud (enfant ) de type 'élément' la fonction s'appelle elle-même afin de parcourir ce noeud. Il s'agit d'une fonction récursive.

La fonction renvoie la variable "texte" qui contient la description des noeuds trouvés.

Le lien affiche le résultat du parcours par la méthode "alert" comme ci-dessous.

Méthode 'item()' et propriété 'length'

Cette méthode est présentée à part car elle ne fait pas partie de "node" mais de "NodeList".

"NodeList" représente une liste de "node". C'est, par exemple, le contenu de la propriété "childNodes" vue plus haut.

Une telle liste pourrait être parcourue comme un tableau avec la notation entre crochets '[]' mais certains navigateurs l'acceptent mal.

Pour ne pas avoir de problèmes avec de telles listes il vaut mieux utiliser 'item(indice)' en lui passant en paramètre l'indice de l'élément concerné. Comme pour les tableaux les indices commencent à 0.

Ces listes disposent aussi de la propriété 'length' qui donne le nombre d'éléments.

Ainsi l'exemple présenté plus haut peut être écrit :

Et voici un autre exemple pour obtenir les attributs :

<body>
<div ID='division' align='center' STYLE='color: red'>
    Voici un texte
</div>
<pre>
<script type="text/javascript">

</script>
</pre>
</body>

Qui affichera :

Voici un texte

align = center
style = color: red
id = division

Méthodes

On a vu dans la page traitant de l'interface "document" (revoir) qu'il existait trois méthodes de "document" pour la création de noeuds :

document.createElement(element);
document.createAttribute(attribut);
document.createTextNode(texte);

Mais, ces noeuds créés "dans le vide", il faut relier le noeud attribut et le noeud texte à un élément. Il en est de même du noeud élément qui doit être "enfant" d'un autre élément déjà existant.

Mise en place des liaisons

appendChild(node);
Ajoute le noeud "node" à l'élément. "node" peut être un noeud d'élément ou de contenu (texte).

setAttibuteNode(attr);
Ajoute l'attribut 'attr" à l'élément.

Suppression

removeAttributeNode(node_att);
Supprime de l'élément le noeud attribut "node_att". Renvoie le noeud attribut retiré.

removeChild(node)
Supprime de l'élément le noeud enfant "node" (élément ou texte). Renvoie le noeud enfant retiré.

Exemple :

<body>
<div ID='division' align='center' STYLE='color: red'>
    Voici un texte<i>d'essai</i>
</div>
<pre>
<script type="text/javascript">

</script>
</pre>
</body>

Affiche :

d'essai
align center
Voici un texte

Autre méthode utile

scrollIntoView(mode);
Cette méthode fait en sorte que l'élément soit visible dans la fenêtre, donc éventuellement fait défiler le document dans la fenêtre (comme un lien vers une ancre)..

Le paramètre "mode" est un booléen. S'il est absent ou s'il vaut 'true', le système essaye de placer l'élément en haut de la fenêtre. S'il vaut 'false', il essayera de la placer en bas.

Test : aller au dernier exemple de cette page (en haut) ou (en bas)

A suivre...

On en a presque fini avec le JavaScript, sauf quelques compléments utiles :

JavaScript différent selon les navigateurs,
gestion des formulaires

A voir donc sur cette dernière page relative au JavaScript.