Réalisation de sites web

Sommaire du site

Présentation
Comment apprendre
L'équipement
La page web
  Styles et CSS
  HTML, structure de la page
  HTML, éléments du corps
Le langage JavaScript
  JavaScript, objets "core"
  JavaScript, DOM, les bases
  JavaScript, DOM, node
  JavaScript, compléments
Le langage PHP, les bases
  PHP, fonctions utiles
  PHP pour le web
  PHP, compléments
SQL, introduction
  MySQL et PHP pour le web
  MySQL, plus loin...
Applications AJAX
Annexes utiles
  Fichier .htaccess
  Sécurité des sites web
  Conception d'un site web
  Référencement, syndication

Sommaire détaillé

Mentions légales.

Chapitres de cette page
Contenu  -> 

Page mise à jour le : 12-08-2015

Haut de la page

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 :

Par exemple :

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

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

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 :

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">
<!--
function Observe (noeud) {
    var texte= "";
    var noeud_enfant= noeud.firstChild;
    while (noeud_enfant != null) {
        texte += noeud_enfant.nodeName+"=>"+noeud_enfant.nodeValue+"\r\n";
        if (noeud_enfant.nodeType == 1)
            texte += Observe(noeud_enfant);
        noeud_enfant= noeud_enfant.nextSibling;
    }
    return texte;
}
//-->
</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 :

<script type="text/javascript">
<!--
function Observe (noeud) {
    var texte= "";
    for (var i= 0; i < noeud.childNodes.length; i++) {
        var noeud_enfant= noeud.childNodes.item(i);
        texte += noeud_enfant.nodeName+"=>"+noeud_enfant.nodeValue+"\r\n";
        if (noeud_enfant.nodeType  == 1)
            texte += Observe(noeud_enfant);
    }
    return texte;
}
//-->
</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>


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">
<!--
    elt= document.getElementById("division");
    att= elt.attributes;
    for (i= 0; i < att.length; i++)
        document.writeln(att.item(i).nodeName+" = "+att.item(i).nodeValue);
//-->
</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 :

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">
<!--
    elt= document.getElementById("division");
    attr= elt.removeAttributeNode(elt.attributes.item(0));
    document.writeln(attr.nodeName+" "+attr.nodeValue);
    txt= elt.removeChild(elt.childNodes.item(0));
    document.writeln(txt.nodeValue);
//-->
</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 :

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