[DOM] Faire une table des matières

Question

Pages :

JRM

31 Oct 2005 à 14:16

Bonjour tout le monde, tout d'abord merci pour vos différentes aides sur le HTML et les CSS, j'ai reglé bon nombre de problêmes grâce à vous. Smiley biggrin

Mon souci aujourd'hui c'est que je suis un pur novice en DOM, et on m'a demandé, dans le cadre d'un projet, de créer une table des matières à partir d'une page HTML qui contient des balises H1 & H2.

Le probleme c'est que je ne sais absolument pas par où commencer.
J'essaye de m'aider de cette doc : http://www.w3.org/DOM/DOMTR
mais j'y comprends rien Smiley confus

Si quelqu'un pouvez bien m'aider, je l'en remercie d'avance.

Raphael

Administrateur

31 Oct 2005 à 16:43

JRM a écrit :
Bonjour tout le monde, tout d'abord merci pour vos différentes aides sur le HTML et les CSS, j'ai reglé bon nombre de problêmes grâce à vous.

Hello et (re?)bienvenue.

D'ailleurs je n'ai pas tout compris : tu as déjà été aidé... mais c'est ton premier message Smiley biggol

QuentinC

31 Oct 2005 à 17:52

Bonjour,
tu veux faire ta table des matières en javascript ?
Je pense que c'est mieux de le faire côté serveur, mais bon, c'est faisable avec la fonction getElementByTagName.

JRM

31 Oct 2005 à 21:20

J'parlais d'aides "indirectes" si je puis-dire.

Sinon oui j'dois faire ma table en javascript.
J'avais fais des essais avec getElementByTagName mais j'étais arrivé à rien (du moins à rien afficher Smiley sweatdrop

).

QuentinC

31 Oct 2005 à 21:40

Tu dois faire la table des matières d'une page quelconque ou bien tu as accès au code XHTML ?

JRM

31 Oct 2005 à 21:49

En fait pour résumer de ceci :

<body>

<div class="exemple">
<h1 class="dummy1">Titre 1</h1>
<div>blah blah blah</div>
<h2 class="dummy2">Titre 1.1</h2>
<div>blah blah</div>
<h2 class="dummy2">Titre 1.2</h2>
<div>blah blah blah</div>

<h2 class="dummy2">Titre 1.3</h2>
<h3 class="dummy3">Titre 1.3.1</h3>
<div>blah blah blah blah blah</div>
<h3 class="dummy3">Titre 1.3.2</h3>
<div>blah blah blah blah blah</div>
<h3 class="dummy3">Titre 1.3.3</h3>
<div>blah blah blah blah blah</div>
<h1 class="dummy1">Titre 2</h1>
<h2 class="dummy2">Titre 2.1</h2>

<div>blah blah</div>
<h2 class="dummy2">Titre 2.2</h2>
<div>blah blah blah</div>
</div>

</body>

Je dois passer à cela :

<body>

<div class="exemple">
<div class="TOC">
<ul>
<li>Titre 1
	<ul>

		<li>Titre 1.1</li>
		<li>Titre 1.2</li>
		<li>Titre 1.3
			<ul>
				<li>Titre 1.3.1</li>
				<li>Titre 1.3.2</li>
				<li>Titre 1.3.3</li>

			</ul>
		</li>
	</ul>
</li>
<li>Titre 2
	<ul>
		<li>Titre 2.1</li>
		<li>Titre 2.2</li>
	</ul>

</li>
</ul>
</div>

<h1 class="dummy1">Titre 1</h1>
<div>blah blah blah</div>
<h2 class="dummy2">Titre 1.1</h2>
<div>blah blah</div>
<h2 class="dummy2">Titre 1.2</h2>
<div>blah blah blah</div>
<h2 class="dummy2">Titre 1.3</h2>

<h3 class="dummy3">Titre 1.3.1</h3>
<div>blah blah blah blah blah</div>
<h3 class="dummy3">Titre 1.3.2</h3>
<div>blah blah blah blah blah</div>
<h3 class="dummy3">Titre 1.3.3</h3>
<div>blah blah blah blah blah</div>
<h1 class="dummy1">Titre 2</h1>
<h2 class="dummy2">Titre 2.1</h2>
<div>blah blah</div>

<h2 class="dummy2">Titre 2.2</h2>
<div>blah blah blah</div>
</div>

</body>

J'dois donc réafficher la même page mais precedée de la table des matières.

QuentinC

31 Oct 2005 à 22:14

Attention, le code ci-dessous est écrit en live dans la textbox pour poster, je n'ai par conséquent pas testé.


var body = document.getElementsByTagName("BODY")[0].innerHTML;

var i1 = -1, i2 = 0, i3 = 0;
var tab = new Array();

var reg = new RegExp("<h(\\d)>(.*?)</h\\d>", "gi");
var match = null;

while ((match = reg.exec(body)) {
var level = parseInt(match[1]);
var text = match[2];

switch (level) {
case 1:
tab[++i1] = new Object();
tab[i1].text = text;
tab[i1].child = new ARray();
i2 = -1; i3 = -1;
break;

case 2:
tab[i1].child[++i2] = new Object();
tab[i1].child[i2].text = text;
tab[i1].child[i2].child = new ARray();
i3 = -1;
break;

case 3:
tab[i1].child[i2].child[++i3] = new Object();
tab[i1].child[i2].child[i3].text = text;
break;
}
}


var html = "<ul>";
for (var i=0; i < tab.length; i++) {
html += "<li>" + (i+1) + ". " + tab[ i].text + "";
if (tab[ i].child.length > 0) {
html += "<ul>";
for (var j=0; j < tab[ i].child.length; j++) {
html += "<li>" + (i+1) + "." + (j+1) + ". " + tab[ i].child[j].text + "";
if (tab[ i].child[j].child.length > 0) {
html += "<ul>";
for (var k=0; k < tab[ i].child[j].child.length; k++) {
html += "<li>" + (i+1) + "." + (j+1) + "." + (k+1) + ". " + tab[ i].child[j].child[k].text + "</li>";
}
html += "</ul>";
}
html += "</li>";
}
html += "</ul>";
}
html += "</li>";
}
html += "</ul>";

document.getElementById('dynamic_toc').innerHTML = html;

J'espère que le bbcode ne va pas bugger ^^

JRM

31 Oct 2005 à 22:36

J'ai toujours rien qui s'affiche. Smiley confus

J't'ai envoyé un MP

chmel

1 Nov 2005 à 01:09

Bonjour,
Quentin c, ce que tu propose n'est pas du DOM. IL reste encore à modifier, mais je le vois plutôt comme cela :

<script type="text/javascript">

function cree_sommaire() {
x=0
//pour simplifier
d=document;
b=d.getElementsByTagName('body')[0];

//sélection du div avec class="exemple" : ex
if(b.childNodes[0].className=="exemple")ex=b.childNodes[0]

//création du sommaire
sommaire=d.createElement("div");
sommaire.className="TOC";


//parcours des éléments de ex
for(a=0;a<ex.childNodes.length;a++){

// extrait le numéro de la class="dummy"+n
	n=ex.childNodes[a].className.substr(5,1)*1;
//si elle éxiste et est > x, un nouveau ul est ajouté
	if(n&&n>x){newUL=d.createElement('ul');sommaire.appendChild(newUL);x++};
//si l'UL éxiste, on ajoute un élément LI contenant le texte
	if(n&&n==x){newLI=d.createElement('li');newUL.appendChild(newLI)
		newLI.appendChild(ex.childNodes[a].firstChild)
		};
	}

//insertion du sommaire au début de ex
ex.insertBefore(sommaire,ex.childNodes[0])

}

window.onload=cree_sommaire

</script>

mes sources:http://fr.selfhtml.org/javascript/objets/node.htm
Modifié par chmel (01 Nov 2005 - 01:11)

QuentinC

1 Nov 2005 à 07:19

Ce n'est pas tout à fait du DOM mais n'empêche que ça peut aussi fonctionner.
Je ne vois pas où est le mal de parcourir le body de la page avec une regex ...

chmel

1 Nov 2005 à 08:38

Bonjour,
Ton code est très bien, mais j'ai du mal avec les "<h(\\d)>(.*?)</h\\d>". J'ai cru comprendre qu'on lui demandait de le faire à partir du DOM et innerHTML n'en fait pas partie je crois.

QuentinC

1 Nov 2005 à 11:52

En tout cas une chose est sûre, innerHTML fonctionne aussi bien sur IE que sure firefox. ET pour opera je ne sais pas mais certainement que oui aussi.

Laurent Denis

1 Nov 2005 à 12:04

QuentinC a écrit :
ET pour opera je ne sais pas mais certainement que oui aussi.

en effet.

JRM

1 Nov 2005 à 13:30

Merci chmel j'vais tester ça de suite.
J'me suis renseigner, et oui, on me demande uniquement du DOM.

Sinon si vous voulez plus d'infos, le sujet se trouve ici : http://profs.insia.org/~tdd/js/

EDIT : Dis moi chmel, t'arrives à afficher la table des matières toi ?
Modifié par JRM (01 Nov 2005 - 14:05)

chmel

2 Nov 2005 à 12:56

Bonjour,
Je me doutait bien que c'était une question scolaire. J'y ai répondu car je trouve amusant ce genre d'énigme. Excuse-moi Quentin c si je me suis mal exprimé.

Résumé de ce que j'ai compris:
Création côté client d' un sommaire fait d'une liste non ordonnée.
Pour chaque élément contenant la class="dummy"+n, on ajoute un item
dans un élément ul d'indice n.Si ul[n] n'éxiste pas, on l'ajoute dans l'ul précédent.

Le début de ma solution est fait avec du DOM1 qui fonctionne sur IE5 &+, NS6 &+,Mozilla 1 &+, Opéra7 &+ ...
Pour l' instant, JRM, si tu colles mon bout de code suivi de ton bout HTML dans un fichier avec l'extension *.htm, tu pourra voir la liste non ordonnée ainsi créée dans ton navigateur favori et il ne restera plus qu'à terminer le boulot.
Bon courage Smiley lol

Modifié par chmel (02 Nov 2005 - 13:10)

JRM

2 Nov 2005 à 15:37

Mon but est evidemment d'y arriver tout seul mais surtout de comprendre ce que je fais. grâce à vous j'sais au moins par où debuter Smiley cligne

.

Sinon chmel, ce que je comprends pas. Ce que la console JavaScript de Firefox me dis que ex n'est pas défini, hors il l'est dans la boucle if.
Faut-il en JS, déclarer ces "variables" au début ? Smiley confus

(j'ai l'impression de dire vraiment une grosse co***** Smiley lol

)

QuentinC

2 Nov 2005 à 17:56

Ah, en effet chmel, je n'avais pas compris qu'il s'agissait d'une exigeance scolaire. Donc, j'ai pondu ce qui me semblait le plus simple pour moi.

chmel

3 Nov 2005 à 01:46

Salut,

JRM a écrit :
Sinon chmel, ce que je comprends pas. Ce que la console JavaScript de Firefox me dis que ex n'est pas défini, hors il l'est dans la boucle if.

Excuse-moi, je n'avait pas essayé sur Firefox et j'avait oublié que Gecko voit des noeuds #text là ou IE n'en voit pas.
Tu as aussi raison pour la définition de variables au début, au cas ou elles ne seraient pas trouvées par la suite.

Nouvelle mouture mieux mais pas encore ça Smiley biggol

:

function cree_sommaire() {
//pour simplifier
ex=x=n=0;ULs=[]
d=document;
b=d.getElementsByTagName('body')[0];

//cherche le div avec class="exemple" : ex
for(i=0;i<b.childNodes.length;i++){
if(b.childNodes[i].className=="exemple"){ex=b.childNodes[i];break}
}

//création du sommaire
sommaire=d.createElement("div");
sommaire.className="TOC";

//insertion du sommaire au début de ex
ex.insertBefore(sommaire,ex.childNodes[0])

//ajout du premier ul
ULs[x]=d.createElement('ul');
sommaire.appendChild(ULs[x])

//parcours les éléments de ex
for(a=0;a<ex.childNodes.length;a++){

	// extrait le numéro de la class="dummy"+n
	if(ex.childNodes[a].className)n=ex.childNodes[a].className.substr(5,1)*1;

	if(n){
		if(!ULs[n]){
			//ul créé si absent
			ULs[n]=d.createElement('ul');
			//dans le précédent 
[fache] [#red] marche pas pour titre 2.1
[#black]			ULs[n-1].appendChild(ULs[n])
		}
		newLI=d.createElement('li');ULs[n].appendChild(newLI)
		newLI.appendChild(ex.childNodes[a].firstChild)
		n=0
		}
	}
}

window.onload=cree_sommaire

Je suis curieux de connaitre ta solution finale
a+
[/i][/i]

JRM

3 Nov 2005 à 03:25

Ouais j'avais retouché déjà ton premier code, et j'avais vu que pour le titre 2.1 ça ne marchait pas. surement un souci dans la boucle mais j'ai pas trouver. là j'suis KO j'm'y remets demain.

JRM

4 Nov 2005 à 02:26

Bon j'crois sincerement que j'vais laissez tomber, j'en ai vraiment marre.
pfff c'est du foutage de gueule, pas un seul cours sur le DOM, et le gars il nous balance ça comme ça...

c'était mon petit coup de gueule desolé Smiley confused

sinon chmel, j'te remercie encore, mais j'arrive a rien afficher, même en reprenant ton code, en le changeant etc... Smiley decu

Pages :

Sujet clos

JavaScript, DOM et API Web HTML5

[DOM] Faire une table des matières