Arbres, parcours du DOM

Javascript pour manipuler les arbres.

Un arbre possède des noeuds et des feuilles on peut également parler de noeuds internes ou externes.
On peut définir la structure d’arbre de façon récursive, toute feuille est un arbre, et tout arbre est constitué de feuille, ou d'arbres.

On peut définir un arbre binaire en javascript

Un arbre binaire est constitué de deux branches droite et gauche avec pour chaque noeud une valeur, les éléments terminaux peuvent correspondre à une feuille.
Voici un exemple d'arbre binaire c

function noeud(valeur, gauche, droite){}
function feuille(valeur){} ;
// Exemple:
var arbre = noeud(1,
feuille("a"),  noeud(6,  
               noeud(4,feuille("c"), feuille("d")) , feuille("b"))

) 

Nous allons utiliser le DOM comme exemple de structure arborescente.

Le DOM comme exemple.

Le "Document Object Model" ou DOM définit la structure logique d'un document XML et la manière d'y accéder et de le manipuler. Ainsi un document HTML bien formé est une arborescence d'éléments ou noeuds (Nodes) ayant comme racine principale le "document".

Javascript permet de manipuler les éléments du DOM. Le point d'entrée dans le DOM d'une page web est l'objet window.document , cet objet peut être en général, simplement écrit "document" en javascript car le langage interagit à l'intérieur de l'objet window, qui devient sous entendu, lorsqu'on crée une variable dans une page web.

Les fonctions principales du DOM :

Plusieurs fonctions existent au sein de l'api DOM pour manipuler l'arbre du DOM, soit n un noeud:

• n.nodeName est le nom du noeud
• nodeType est le type du noeud
  1. 1: Element
  2. 2: Attribut
  3. 3 type texte
childNodes: tableau correspondant aux enfants.
• firstChild: 1er enfant à gauche de l'arbre
• nextSibling: noeud suivant
• getAttribute, setAttribute
• parentNode

Exemple de fonctions

Compter le nombre de noeuds d'une page:

function compte( n){
    if(typeof(n) !== 'object') return 0 ;
    var n=n.firstChild;
    var total = 1 ;
    while(n)   {
        total += compte(n) ;
        n = n.nextSibling ;
    }
    return total;
};

Compter en utilisant childNodes et map :

function compte(n){
   if(typeof(n) !== 'object') return 0 ;
   return 1 + n.childNodes.map(compte) ;

}

Pour obtenir la liste des noeuds:

var nodes = [] ;
function  allChildren(n){
    if(typeof(n) !== 'object') return [] ;
    var n=n.firstChild;
    while(n)   {
        if(n.nodeType==1)  nodes.push(n);
        nodes.concat(compte(n)) ;
        n = n.nextSibling ;
    }
    return nodes;
};
allChildren(document.body);