// Module d'analyse de la structure hiérarchique de la DOM d'une page web
// ou d'un de ses neouds
//
// Variables d'affichage pour le mode liste
HHead = "\n";
HHead += '';
HHead += "\n\n";
// alert(HHead);
HTrailer = '';
HTitle = "
Structure de la DOM
\n";
HBeginItem = "\n
";
HEndItem = "
\n";
HBeginList = "
\n";
HEndList = "
\n";
//
// ===========================================================================================
// Code d'insertino du code JavaScript
// ===========================================================================================================
//
//
// ===========================================================================================
// Code du bouton à placer pour appeler la procédure d'affichage dans une fenêtre externe
// ===========================================================================================================
//
//
// ===========================================================================================================
//
// Fonction d'affichage dans un DIV identifié
function DisplayDIV(text)
{
document.getElementById("DisplayDIV").innerHTML = text;
};
//
// Fonction d'affichage dans une fenêtre externe
function DisplayWIN(text)
{
var winDOM = window.open("","_blank",
"width=400,height=600,"+
"location=no,hotkeys=no,directories=no"+
"menubar=yes,scrollbars=yes,toolbar=yes,status=yes");
winDOM.document.write(text);
winDOM.document.close();
};
//
// Fonction permettant de trouver la racine de la DOM
function findRoot(el)
{
while(el = el.parentNode)
{
el1 = el;
// type = el.nodeType;
// alert("!" + type + "!");
};
return el1;
};
//
// Cette fonction renvoie sous forme de texte HTML la liste hiéarchique
// de l'arbre des nœuds à partir de la racine (ou «somme») de la DOM
function DisplayDOM(el)
{
text = DisplayAll(findRoot(el));
return text;
};
//
// Cette fonction renvoie sous forme de texte HTML la liste hiéarchique
// de l'arbre des nœuds à partir de BODY
function DisplayBODY(el)
{
text = DisplayAll(document.body);
return text;
};
//
// Cette fonction renvoie sous forme de texte HTML la liste hiéarchique
// avec un titre et une marque de fin
function DisplayAll(node)
{
text = HHead + HTitle;
text += DisplaySubNodes(node);
text += "" + HTrailer;
return text;
};
//
// FONCTION AVEC APPEL RECURSIF
// QUI CRÉE LE TEXTE DE
function DisplaySubNodes(node)
{
var text = HBeginItem + Item2text(node);
var list = ListSubNodes(node);
var n = list.length;
if (n > 0)
{
text += " →" + n + " Subnodes)\n" + HBeginList;
// ICI IL EST ESSENTIEL D'AVOIR var DEVANT i
// pour la récursino
for (var i=0; i" ;
}else{
text += HEndItem;
};
return text;
};
//
// Renvoie la liste des sous-nœuds
// Cette fonction est dans ce cas superflue
// Mais est utile dans un schéma récursif général
// où la procédure de listage des sous-nœuds pourrait être plus comlexes
function ListSubNodes(el)
{
list = el.childNodes;
return list;
}
//
// Cette fonction renvoie un descriptif de nœud
// sous forme de texte HTML
function Item2text(el)
{
type = el.nodeType;
tag = el.tagName;
id = el.id;
classN = el.className;
txtContent = el.textContent;
//
txt = "type " + type + " : ";
if(type == 1)
{
txt += "<" + tag + "> ";
}else{
txt += " ";
};
if(id)
{
txt += " ID=" + id + " ";
};
if(classN)
{
txt += " class=" + classN;
};
if(el.isElementContentWhitespace)
{
txt += "~~~ ";
}else{
if(txtContent)
// if(txtContent & (type == 3))
{
if(type == 3)
{
txt += " «" + txtContent.substring(0,15);
if(txtContent.length>15){txt += "...";};
txt += "»";
};
};
};
if (tag == "IMG")
{
txt += " src=" + el.src;
};
return txt;
};
//
// Fonction de test (dégogage)
function testListSubNodes(el)
{
list = el.childNodes;
n = list.length;
pluriel = (n>1) ? "s" : "";
list = ("a", "b", "c");
alert("" + n + " enfant" + pluriel);
};