[JavaScript / DOM] Faire une table des matières

Logiciel & apps Programmation
1

Bonjour, j’suis paumée :’( (pas mal pour commencer ?)

J’vous explique j’ai un rendu à faire (celui-ci : rendu_DOM)
Et le probleme c’est que je n’arrive à rien :confused:
Voilà ce que j’ai fais pour le moment :

function generateTOC(){
	var x = 0;
	var n = 0;
	var UL = [];
	var dgb = document.getElementsByTagName('body')[0];
	
	for(index=0; index<dgb.childNodes.length; index++){
  if(dgb.childNodes.className == "exemple"){
  	var exe = dgb.childNodes;
  	break;
  }
	}

	var sommaire = document.createElement("div");
	sommaire.className = "TOC";

	exe.insertBefore(sommaire,exe.childNodes[0]);

	UL[x] = document.createElement('ul');
	sommaire.appendChild(UL[x]);
	
	for(index2=0; index2<exe.childNodes.length; index2++){
  if(exe.childNodes[index2].className)
  	var n = exe.childNodes[index2].className.substr(5,1)*1;
  if(n){
  	if(!UL[n]){
    UL[n] = document.createElement('ul');
    UL[n-1].appendChild(UL[n]);
  	}
  	var newLI = document.createElement('li');
  	UL[n].appendChild(newLI);
  	newLI.appendChild(ex.childNodes[index2].firstChild);
  	n=0;
  }
	}
}
window.onload = generateTOC();

Avec ce code, bah j’arrive à rien. C’est pour ça que j’viens demander l’aide de quelqu’un ici.
J’tiens à preciser qu’avant cet exo, je n’avais jamais vu le DOM, donc si des choses vous paraissent aberrantes … c’est normal :smiley:

J’vous remercie d’avance pour toute aide de votre part :slight_smile:

2

J’ai une question, pourquoi dans la console JavaScript de Firefox j’ai ce message d’erreur :

C’est parce j’ai pas (ou mal) declaré “dgb” au début du code ? :??:

3

Bnojur,
ça veut juste dire qu’il ne trouve pas la propriété pour ton élément. Je n’ai jamais utilisé le modèle DOM, c’est intéressant, mais apparemment il y a une erreur:


 for(index=0; index<dgb.childNodes.length; index++){
 if(dgb.childNodes[COLOR=red][i][/COLOR].className == "exemple"){
  var exe = dgb.childNodes[COLOR=red][i][/COLOR];
  break;
 }
}

dgb.childNodes[i].className existe mais pas dgb.childNodes.className: il ne trouve pas la propriété “classname”.
mais comme l’erreur porte sur dgbn c’est peut-être dbg.childnodes qu’il ne trouve pas.
des petites message de test pour débugger seraient bienvenus: :wink:
alert(‘test’+dbg.childnodes);
alert(‘test’+dbg.childnodes.length);
etc…

un petit lien sur une référence javascript, si tu n’e n’avais déjà un.
http://fr.selfhtml.org/javascript/objets/elementshtml.htm

4

J’te remercie, ça m’a beaucoup aidé.
Maintenant j’ai quelque chose qui s’affiche (yahoooooooo :smiley: )

Mais, j’ai encore un souci, j’dois arriver à se resultat :

hors j’obtiens ceci

le Titre 2 s’affiche à la fin :neutre: vous savez pas d’où ça pourrait venir ?

j’vous remets mon code pour que se soit plus clair

//Javascript Document

function generateTOC() {
	x = 0;
	n = 0;
	UL = [];
	dgb = document.getElementsByTagName('body')[0];
	
	for(index=0; index<dgb.childNodes.length; index++){
  if(dgb.childNodes[index].className == "exemple"){
  	exe = dgb.childNodes[index];
  	break;
  }
	}
	
	//Creation de la table des matieres "tdm"
	tdm = document.createElement("div");
	tdm.className="TOC";
	
	//Inserer la "tdm" en debut de page
	exe.insertBefore(tdm,exe.childNodes[0]);

	UL[x] = document.createElement('ul');
	tdm.appendChild(UL[x]);
	
	for(index2=0; index2<exe.childNodes.length; index2++){
  if(exe.childNodes[index2].className)
  	n = exe.childNodes[index2].className.substr(5,1)*1;
	
  if(n){
  	if(!UL[n]){
    UL[n] = document.createElement('ul');
    UL[n-1].appendChild(UL[n]);
  	}
  	newLI = document.createElement('li');
  	UL[n].appendChild(newLI);
  	tampon = exe.childNodes[index2].firstChild.cloneNode(true);
  	newLI.appendChild(tampon);
  	n = 0;
  }
	}
}
window.onload = generateTOC;

forcement une erreur dans ma dernière boucle (enfin j’imagine) mais j’arrive pas à la trouver…

encore merci :jap: