11402 sujets

JavaScript, DOM et API Web HTML5

Pages :
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.
Administrateur
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. Smiley biggrin

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
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.
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 ).
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.
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 ^^
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)
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 ...
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.
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.
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)
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)
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 )
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.
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]
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.
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 :