Discussion :

[Beginner.]

Salut,

J’essaie d’analyser les bookmarks de FF pour certaines raisons... Et alors des questions me sont venues à l'esprit...

Je donne un exemple de bookmark en html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
     It will be read and overwritten.
     DO NOT EDIT! -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Menu des marque-pages</H1>
 
<DL><p>
    <DT><A HREF="place:folder=BOOKMARKS_MENU&folder=UNFILED_BOOKMARKS&folder=TOOLBAR&queryType=1&sort=12&maxResults=10&excludeQueries=1" ADD_DATE="1454705742" LAST_MODIFIED="1533233025">Marqués récemment</A>
    <DT><A HREF="place:type=6&sort=14&maxResults=10" ADD_DATE="1533233031" LAST_MODIFIED="1533233032">Étiquettes récentes</A>
    <HR>    <DT><H3 ADD_DATE="1454705742" LAST_MODIFIED="1454705742">Mozilla Firefox</H3>
    <DL><p>
        <DT><A HREF="https://www.mozilla.org/fr/firefox/help/" ADD_DATE="1454705742" LAST_MODIFIED="1454705742" ICON_URI="http://www.mozilla.org/2005/made-up-favicon/1-1454705742681" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwMDAsTBZbkNwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABNElEQVQ4y8WSsU0DURBE3yyWIaAJaqAAN4DPSL6AlIACKIEOyJEgRsIgOOkiInJqgAKowNg7BHdn7MOksNl+zZ//dvbDf5cAiklp22BdVtXdeTEpDYDB9m1VzU6OJuVp2NdEQCaI96fH2YHG4+mDduKYNMYINTcjcGbXzQVDEAphG0k48zUsajIbnAiMIXThpW8EICE0RAK4dvoKg9NIcTiQ589otyHOZLnwqK5nLwBFUZ4igc3iM0d1ff8CMC6mZ6Ihiaqq3gi1aUAnArD00SW1fq5OLBg0ymYmSZsR2/t4e/rGyCLW0sbp3oq+yTYqVgytQWui2FS7XYF7GFprY921T4CNQt8zr47dNzCkIX7y/jBtH+v+RGMQrc828W8pApnZbmEVQp/Ae7BlOy2ttib81/UFc+WRWEbjckIAAAAASUVORK5CYII=">Aide et didacticiels</A>
        <DT><A HREF="https://www.mozilla.org/fr/firefox/customize/" ADD_DATE="1454705742" LAST_MODIFIED="1454705742" ICON_URI="http://www.mozilla.org/2005/made-up-favicon/2-1454705742683" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwMDAsTBZbkNwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABNElEQVQ4y8WSsU0DURBE3yyWIaAJaqAAN4DPSL6AlIACKIEOyJEgRsIgOOkiInJqgAKowNg7BHdn7MOksNl+zZ//dvbDf5cAiklp22BdVtXdeTEpDYDB9m1VzU6OJuVp2NdEQCaI96fH2YHG4+mDduKYNMYINTcjcGbXzQVDEAphG0k48zUsajIbnAiMIXThpW8EICE0RAK4dvoKg9NIcTiQ589otyHOZLnwqK5nLwBFUZ4igc3iM0d1ff8CMC6mZ6Ihiaqq3gi1aUAnArD00SW1fq5OLBg0ymYmSZsR2/t4e/rGyCLW0sbp3oq+yTYqVgytQWui2FS7XYF7GFprY921T4CNQt8zr47dNzCkIX7y/jBtH+v+RGMQrc828W8pApnZbmEVQp/Ae7BlOy2ttib81/UFc+WRWEbjckIAAAAASUVORK5CYII=">Personnaliser Firefox</A>
        <DT><A HREF="https://www.mozilla.org/fr/contribute/" ADD_DATE="1454705742" LAST_MODIFIED="1454705742" ICON_URI="http://www.mozilla.org/2005/made-up-favicon/3-1454705742685" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwMDAsTBZbkNwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABNElEQVQ4y8WSsU0DURBE3yyWIaAJaqAAN4DPSL6AlIACKIEOyJEgRsIgOOkiInJqgAKowNg7BHdn7MOksNl+zZ//dvbDf5cAiklp22BdVtXdeTEpDYDB9m1VzU6OJuVp2NdEQCaI96fH2YHG4+mDduKYNMYINTcjcGbXzQVDEAphG0k48zUsajIbnAiMIXThpW8EICE0RAK4dvoKg9NIcTiQ589otyHOZLnwqK5nLwBFUZ4igc3iM0d1ff8CMC6mZ6Ihiaqq3gi1aUAnArD00SW1fq5OLBg0ymYmSZsR2/t4e/rGyCLW0sbp3oq+yTYqVgytQWui2FS7XYF7GFprY921T4CNQt8zr47dNzCkIX7y/jBtH+v+RGMQrc828W8pApnZbmEVQp/Ae7BlOy2ttib81/UFc+WRWEbjckIAAAAASUVORK5CYII=">Contribuer</A>
        <DT><A HREF="https://www.mozilla.org/fr/about/" ADD_DATE="1454705742" LAST_MODIFIED="1454705742" ICON_URI="http://www.mozilla.org/2005/made-up-favicon/4-1454705742688" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwMDAsTBZbkNwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABNElEQVQ4y8WSsU0DURBE3yyWIaAJaqAAN4DPSL6AlIACKIEOyJEgRsIgOOkiInJqgAKowNg7BHdn7MOksNl+zZ//dvbDf5cAiklp22BdVtXdeTEpDYDB9m1VzU6OJuVp2NdEQCaI96fH2YHG4+mDduKYNMYINTcjcGbXzQVDEAphG0k48zUsajIbnAiMIXThpW8EICE0RAK4dvoKg9NIcTiQ589otyHOZLnwqK5nLwBFUZ4igc3iM0d1ff8CMC6mZ6Ihiaqq3gi1aUAnArD00SW1fq5OLBg0ymYmSZsR2/t4e/rGyCLW0sbp3oq+yTYqVgytQWui2FS7XYF7GFprY921T4CNQt8zr47dNzCkIX7y/jBtH+v+RGMQrc828W8pApnZbmEVQp/Ae7BlOy2ttib81/UFc+WRWEbjckIAAAAASUVORK5CYII=">À propos de Mozilla</A>
    </DL><p>
    <DT><H3 ADD_DATE="1533233128" LAST_MODIFIED="1533233150">Informatique</H3>
    <DL><p>
        <DT><H3 ADD_DATE="1533233150" LAST_MODIFIED="1533234371">JavaScript</H3>
        <DL><p>
            <DT><A HREF="https://javascript.developpez.com/faq/" ADD_DATE="1533234371" LAST_MODIFIED="1533234371">Les FAQ programmation informatique JavaScript</A>
            <DT><H3 ADD_DATE="1533233247" LAST_MODIFIED="1533234341">Tutoriels - Cours - Livres</H3>
            <DL><p>
                <DT><H3 ADD_DATE="1533233612" LAST_MODIFIED="1533234186">Livres</H3>
                <DL><p>
                    <DT><A HREF="https://javascript.developpez.com/livres/index/?page=JavaScript" ADD_DATE="1533234163" LAST_MODIFIED="1533234163">Livres JavaScript : JavaScript</A>
                </DL><p>
                <DT><A HREF="https://javascript.developpez.com/cours/" ADD_DATE="1533233187" LAST_MODIFIED="1533233260">Les meilleurs cours et tutoriels pour apprendre le JavaScript</A>
                <DT><A HREF="https://javascript.developpez.com/tutoriels/introduction/" ADD_DATE="1533233397" LAST_MODIFIED="1533233412">Introduction au JavaScript</A>
                <DT><A HREF="https://buzut.developpez.com/tutoriels/programmation-orientee-objet-javascript/" ADD_DATE="1533233374" LAST_MODIFIED="1533233374" ICON_URI="https://buzut.developpez.com/template/favicon.ico" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABUElEQVQ4jaXRTSgDcBjH8W+zYUNYXqdhOHiJzIqFbDlZKRIncsFiMwcveYkoL4VSRFJzIMphIkXKQQ5OpByVJHGWgwuzx0Wu9s9Tz/H3eX71wO+0RMB4bobzoJR/TfJabHHVeqvBttw9BUaBnFdIUDIEssWcfP+WnyltOM7FSdIUaFSAFwERb1w90b5ZtDPnqg3kZ10A8ZaJMxjYVwGuQhAKajkESLGMlRhN/QL+8rCAD7AG85BQDSLgAIg3Lwl0rYTfIhGPLFSIzLnkFuwRpTsC3s2wAYBgamSD3JzKrrNW6qafBNyNSgDANegCe5fS3LotIXv085cBzzukC+glnNcOTx7tHl88CTSVfZr0lV+F9AkMCVj/BMrqthbnt+8E2quVq6MdCcQUrD5CUZpisiMPOh/A3asUc/lOohLNoz1oPIOKF8Fm29BZa/1ZykHgG81ycigvBviIAAAAAElFTkSuQmCC">Apprendre la programmation orientée objet en JavaScript</A>
            </DL><p>
            <DT><H3 ADD_DATE="1533233422" LAST_MODIFIED="1533233580">Forums - Quelques liens au pif...</H3>
            <DL><p>
                <DT><A HREF="https://www.developpez.net/forums/f23/javascript/general-javascript/" ADD_DATE="1533233580" LAST_MODIFIED="1533233580" ICON_URI="https://www.developpez.net/forums/favicon.ico" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABUElEQVQ4jaXRTSgDcBjH8W+zYUNYXqdhOHiJzIqFbDlZKRIncsFiMwcveYkoL4VSRFJzIMphIkXKQQ5OpByVJHGWgwuzx0Wu9s9Tz/H3eX71wO+0RMB4bobzoJR/TfJabHHVeqvBttw9BUaBnFdIUDIEssWcfP+WnyltOM7FSdIUaFSAFwERb1w90b5ZtDPnqg3kZ10A8ZaJMxjYVwGuQhAKajkESLGMlRhN/QL+8rCAD7AG85BQDSLgAIg3Lwl0rYTfIhGPLFSIzLnkFuwRpTsC3s2wAYBgamSD3JzKrrNW6qafBNyNSgDANegCe5fS3LotIXv085cBzzukC+glnNcOTx7tHl88CTSVfZr0lV+F9AkMCVj/BMrqthbnt+8E2quVq6MdCcQUrD5CUZpisiMPOh/A3asUc/lOohLNoz1oPIOKF8Fm29BZa/1ZykHgG81ycigvBviIAAAAAElFTkSuQmCC">Général JavaScript</A>
                <DT><A HREF="https://www.developpez.net/forums/d1879886/javascript/general-javascript/checkbox-checkbox-ca-marche/" ADD_DATE="1533233509" LAST_MODIFIED="1533233509" ICON_URI="https://www.developpez.net/forums/favicon.ico" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABUElEQVQ4jaXRTSgDcBjH8W+zYUNYXqdhOHiJzIqFbDlZKRIncsFiMwcveYkoL4VSRFJzIMphIkXKQQ5OpByVJHGWgwuzx0Wu9s9Tz/H3eX71wO+0RMB4bobzoJR/TfJabHHVeqvBttw9BUaBnFdIUDIEssWcfP+WnyltOM7FSdIUaFSAFwERb1w90b5ZtDPnqg3kZ10A8ZaJMxjYVwGuQhAKajkESLGMlRhN/QL+8rCAD7AG85BQDSLgAIg3Lwl0rYTfIhGPLFSIzLnkFuwRpTsC3s2wAYBgamSD3JzKrrNW6qafBNyNSgDANegCe5fS3LotIXv085cBzzukC+glnNcOTx7tHl88CTSVfZr0lV+F9AkMCVj/BMrqthbnt+8E2quVq6MdCcQUrD5CUZpisiMPOh/A3asUc/lOohLNoz1oPIOKF8Fm29BZa/1ZykHgG81ycigvBviIAAAAAElFTkSuQmCC"> Un checkbox dans une autre checkbox ca marche pas ? </A>
                <DT><A HREF="https://www.developpez.net/forums/d1859989/javascript/general-javascript/drag-and-drop-methode-setdata-datatransfert/" ADD_DATE="1533233517" LAST_MODIFIED="1533233517" ICON_URI="https://www.developpez.net/forums/favicon.ico" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABUElEQVQ4jaXRTSgDcBjH8W+zYUNYXqdhOHiJzIqFbDlZKRIncsFiMwcveYkoL4VSRFJzIMphIkXKQQ5OpByVJHGWgwuzx0Wu9s9Tz/H3eX71wO+0RMB4bobzoJR/TfJabHHVeqvBttw9BUaBnFdIUDIEssWcfP+WnyltOM7FSdIUaFSAFwERb1w90b5ZtDPnqg3kZ10A8ZaJMxjYVwGuQhAKajkESLGMlRhN/QL+8rCAD7AG85BQDSLgAIg3Lwl0rYTfIhGPLFSIzLnkFuwRpTsC3s2wAYBgamSD3JzKrrNW6qafBNyNSgDANegCe5fS3LotIXv085cBzzukC+glnNcOTx7tHl88CTSVfZr0lV+F9AkMCVj/BMrqthbnt+8E2quVq6MdCcQUrD5CUZpisiMPOh/A3asUc/lOohLNoz1oPIOKF8Fm29BZa/1ZykHgG81ycigvBviIAAAAAElFTkSuQmCC"> Drag and drop méthode setData pour dataTransfert </A>
            </DL><p>
        </DL><p>
    </DL><p>
    <DT><H3 ADD_DATE="1454705741" LAST_MODIFIED="1533233030" PERSONAL_TOOLBAR_FOLDER="true">Barre personnelle</H3>
    <DD>Ajoutez des marque-pages dans ce dossier pour les voir apparaître sur votre barre personnelle
    <DL><p>
        <DT><A HREF="place:sort=8&maxResults=10" ADD_DATE="1533233030" LAST_MODIFIED="1533233031">Les plus visités</A>
        <DT><A HREF="https://www.mozilla.org/fr/firefox/central/" ADD_DATE="1454705742" LAST_MODIFIED="1454705742" ICON_URI="http://www.mozilla.org/2005/made-up-favicon/0-1454705742676" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAz5JREFUeNpcU0toXFUY/s49596588ikySSmM8rk0UkJEirVTVEjYk1NUdRFFgouXZQI2k2hUCjdiYIuCi4Kuig0DbqQYgU3Yi0iFRuRCBMwaZvMZDTNY95z3/fM8b8jldpzOeeee/i/737n+/+f4ZExf730rkiaZ9NJMx/nmk5HypMqqLr+ZuD4F67N5ZYejmfRsnvhyKsLhSs3zP70SubgYKHSdFENu+gXAprQIGnvBi5ez0m1b6u7M399+PTx+UvtCKtFi2F6195qXK2byir88esy5ksfYND5DhuhRCtUKBNB0Q7w5Z8ee2GgWdjOn250fn5v5j8F5dOHlZD0kWRgAwp3hrKY0S9BJWKIcQ5PShhNG4+1bHx+IocT+RXcrRSDMfFNRvvt3Oyp/icIrRhUl9hoO4kt3F55Bxf3LkLV20jWOohbDjzXxyc/lMH0cRSyCd1xq+dFhu986t7T0CUwIzB8EkW3O5ibhj44ib7NJhiBKRoB/aS4ZWHjbxtjGQYP7nGRTjim1SaQqYiAVAREpHG8vzWJn+6PQ6CF0HPR7nQQczpYeEWHyWMUkwU8MSECGwgJxAWp9xWKNzkuH3oet+JDlIE9Momedh1G4CN0bfhVG9nsS0BQQthJx0V7j3elq7ihqV5ezQTwZmodP9ZGkU/bOPr4Nr53xtDYsaD7Dg4nNqFaH5OCYSSdGhf7daNmuv6wEKqXk/yExKGBHSznFsH6FFpKQ/JAA0ulUejWLt44lkHXsqDaX6C6Nl4Rnq8vK8s/KThDMlJhkI91YOO+iR3XwEelCdTCBLSgijNzd6DLNfhlHfZ6FtWiWBQpq/V2LdSrrNPljBQkoOjuCiPxAMutOIbkPqYSEqeequGZaTLzdhZhS0PlnlB9bvhtr5CuHj3y2Qj8hVQ/kEopxONEEsO/0yATDYXYAdWrE69JEElXq7Hyk0tro+xBU1yZmr4xrIcvptIRCZlJJAYBmRGRkD08aivA7VDvWPqt564Xn41w/AHB1/u7l1/uGxGU8mNcgodUNDIq0JDeLnpzc1uo1Qr76rWbqyf/142PjsXJqdkmN2YDnQ9oGkJNU+t57q7qUv4y9/t64+HYfwQYAN7OczrzUDvGAAAAAElFTkSuQmCC">Débuter avec Firefox</A>
    </DL><p>
</DL>

Je trouve qu'il n'est pas propre ce html ! D'ailleurs quand je l'affiche dans un navigateur on n'a pas une indentation correcte (des dossiers et sous dossiers) mais sur openOffice ça va il s'en sort... On devrait avoir ça (je dois mettre une image) :


Alors ma première question :

Tous les noms de dossier sont dans des balises h3, j'aimerais savoir comment vous ferriez pour récupérer toutes ces balises en conservant l’arborescence des dossiers ?

Je ne sais pas si ma question est claire ?

EDIT :

Un des objectifs dans un premier temps serait éventuellement de récrire une page html avec des ul et des li pour les dossiers et sous dossiers et leur contenu...
Après si je peux ajouter des plier/déplier...

[mathieu]

comment allez-vous analyser cette page avec JavaScript ?
vous allez rajouter le script dans le code de la page ? ou alors avec une extension du navigateur comme Tampermonkey ?

[Beginner.]

Je pense rajouter un script dans la page... C'est le plus simple pour moi.

Un des objectifs dans un premier temps serait éventuellement de récrire une page html avec des ul et des li pour les dossiers et sous dossiers et leur contenu...
Après si je peux ajouter des plier/déplier...

Je vais quand même regarder ce fameux "Tampermonkey" que je ne connais pas...

Merci.

[Beginner.]

Bon j'ai réussi à faire le premier point : récupérer tous les noms de dossier et sous dossier (elles sont dans des balises h3) et leur contenu (balise a)... J'ai surtout utilisé du JS pour parcourir le DOM mais je me demande si on peut faire mieux en sachant bien utiliser les sélecteurs CSS... Enfin je fais ensuite un petit affichage élémentaire que je met ci-après pour clarifier ma question si besoin est :

Code text :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Menu des marque-pages
 
       Marqués récemment
       Étiquettes récentes
       Mozilla Firefox
             Aide et didacticiels
             Personnaliser Firefox
             Contribuer
             À propos de Mozilla
       Informatique
             JavaScript
                   Les FAQ programmation informatique JavaScript
                   Tutoriels - Cours - Livres
                         Livres
                               Livres JavaScript : JavaScript
                         Les meilleurs cours et tutoriels pour apprendre le JavaScript
                         Introduction au JavaScript
                         Apprendre la programmation orientée objet en JavaScript
                   Forums - Quelques liens au pif...
                         Général JavaScript
                         Un checkbox dans une autre checkbox ca marche pas ? 
                         Drag and drop méthode setData pour dataTransfert 
       Barre personnelle
             Les plus visités
             Débuter avec Firefox

Mais l'indentation est faite juste avec des espaces, je n'ai pas encore récris une page html avec des ul et des li pour les dossiers et sous dossiers et leur contenu...
Ce qui serait mieux je pense et permettrait entre autres d'ajouter des "plier/déplier"...

[NoSmoking]

Bonjour,

Je trouve qu'il n'est pas propre ce html ! D'ailleurs quand je l'affiche dans un navigateur on n'a pas une indentation correcte

il y a application des styles par défaut et ceux-ci ne sont pas comparable aux listes <ul> ou <ol>, rien te t'empêche donc d'appliquer ta propre feuille de style pour créer cette indentation justement.

Si tu veux analyser « visuellement » ta page je te propose d'intégrer les CSS suivant dans celle-ci

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
dl, dt {
  margin: auto 2em;
}
dt h3 {
  color: #069;
  margin-left: 2em;
}
dl {
  border: 1px dotted #069;
}
dt {
  background: #EFF;
}
dl dl dt {
  background: #DEF;
}
dl dl dl dt {
  background: #CDE;
}
dl dl dl dl dt {
  background: #BCD;
}
p {
  border-top:1px solid #00F;
  margin: .25em 0;
}
h3::before { content: "<H3>";}
h3::after  { content: "</H3>";}
dl::before { content: "<DL>";}
dl::after  { content: "</DL>";}
dt::before { content: "<DT>";}
dt::after  { content: "</DT>";}

tu pourras te rendre compte rapidement de la structure de ton fichier.

je n'ai pas encore récris une page html avec des ul et des li pour les dossiers et sous dossiers et leur contenu...

je n'en vois pas bien l'intérêt vu ce que je viens d'indiquer au dessus.

Ce qui serait mieux je pense et permettrait entre autres d'ajouter des "plier/déplier"...

le code JS pour réaliser un expand/collapse ce résume à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var oElems = document.querySelectorAll("DT > H3");
[].forEach.call(oElems, function (elem) {
  elem.onclick = function (e) {
    var liste = elem.nextElementSibling;
    if (liste) {
      liste.style.display = liste.offsetHeight ? "none" : "block";
    }
  }
});

Après tu peux agrémenter avec des +/-, ou autre, en utilisant le CSS et les classes.

Documentation :

• The dl element.

[Beginner.]

Merci.
Ah oui bien vu ta solution CSS pour visualiser l'arborescence. Et tu as aussi fait le "expand/collapse" ! Intéressant l'astuce du offsetHeight, c'est mieux que : liste.style.display = liste.style.display === "block" || liste.style.display === "" ? "none" : "block";...

je n'en vois pas bien l'intérêt vu ce que je viens d'indiquer au dessus.

En effet ta solution CSS règle le problème de visualisation de la structure arborescente... Mais en fait il y a une autre raison je voudrais pouvoir récupérer le chemin de chaque élément (dossier ou lien) depuis la racine et à priori c'est plus simple quand on a une structure parent/enfant... Là le contenu d'un dossier n'est pas dans un enfant mais dans l’élément suivant mais bon c'est faisable donc ça devrait aller...

En fait je voulais aussi faire un moteur de recherche, FF en a un mais je voulais ajouter certaines fonctionnalités comme pouvoir faire une recherche dans les noms de dossier aussi bien que dans les liens et ajouter le chemin des résultats.

Oui parce que j'ai beaucoup de favoris et je m'y perd parfois or FF donne seulement les résultat (liens) sans nous dire dans quel dossier il est et parfois j'ai besoin de le savoir (le chercher soi-même est fatiguant quand il y a beaucoup de dossier et sous-dossier). Il y a des éditeurs qui affichent les résultats (liens) dossier par dossier avec le fameux "expand/collapse" et je trouve ça pratique justement.

Alors je me dis quitte à devoir produire du html pour afficher les résultats autant utiliser pour cela des ul et des li... Et comme pour faire la recherche je dois parcourir le DOM alors je récupère aussi l’arborescence sous forme parent/enfant...

Bon en tous cas ça m'a fait réfléchir et c'était un bon exercice...

[NoSmoking]

Mais en fait il y a une autre raison je voudrais pouvoir récupérer le chemin de chaque élément (dossier ou lien) depuis la racine et à priori c'est plus simple quand on a une structure parent/enfant... Là le contenu d'un dossier n'est pas dans un enfant mais dans l’élément suivant mais bon c'est faisable donc ça devrait aller...

je ne comprend pas ce que tu cherches à dire, on est bien en présence d'une liste <dl> avec enfant <dt>.

Oui parce que j'ai beaucoup de favoris et je m'y perd parfois

Tu peux te construire ta propre page si ce que proposent les navigateurs ne te convient pas, avec un système d'onglet par exemple. Ce serarit un bon exercice de manipulation des objets JSON

[Beginner.]

Merci.

je ne comprend pas ce que tu cherches à dire, on est bien en présence d'une liste <dl> avec enfant <dt>.

Oui c'est vrai, c'est juste que ce <dl> ne contient pas le nom du dossier mais c'est vrai qu'il est facile à récupérer : il est dans un <h3> et celui-ci est l’élément qui précède le <dl>. Mais il faudra qund même ajouter un test pour savoir si on est à la raciene mais aussi je viens de voir qu'il suffit de vérifier si on a <h1> et non un <h3>.

Et finalement je me rends compte que ce ne serait pas plus facile avec des <ul> et des <li> car les <ul> ne contiendront pas non plus le nom du dossier... Il faudra bien le mettre quelque part et ça risque même d'être plus compliqué car je ne sais pas si on peut mettre par exemple un <h3> dans un .<ul> ???

Tu peux te construire ta propre page si ce que proposent les navigateurs ne te convient pas, avec un système d'onglet par exemple. Ce serarit un bon exercice de manipulation des objets JSON

Ah ben justement j'ai regardé ce fameux JSON et j'aurais une question d'ailleurs mais je vais ouvrir un autre fil...

[danielhagnoul]

La question m'a intéressé. N'utilisant Firefix que très occasionnellement, le plus dur a été de trouver comment exporter les marque-pages dans un fichier HTML. Heureusement l'aide Firefox est bien faite : https://support.mozilla.org/fr/kb/ex...x-fichier-html

J'ai ensuite copié-collé la partie du code commençant par <DL> dans ma page de test et je lui ai donné un ID : <DL id="marquePages">.

Le reste a été relativement facile :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`);
 
    // début code du test
 
    const
        elemMarquePages = document.querySelector('#marquePages'),
        elemsH3 = elemMarquePages.querySelectorAll('h3');
 
    for (const [i, item] of elemsH3.entries()) {
        console.log('*******');
        console.log( `titre = ${ item.textContent }`);
        console.log('-------');
 
        for (const [j, jtem] of item.parentNode.querySelectorAll('a').entries()){
            if (jtem.href.slice(0, 4) === 'http'){
                console.log(j, jtem.href, jtem.textContent);
            }
        }
    }
 
    // fin code du test
 
    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});

Ce qui me donne dans la console (il reste a traité les données en fonction de vos besoins) :

DOM ready : 2018-08-04T21:25:01.533+0200
test.js:23 Window load : 2018-08-04T21:25:01.709+0200
test.js:32 *******
test.js:33 titre = Mozilla Firefox
test.js:34 -------
test.js:38 0 "https://www.mozilla.org/fr/firefox/help/" "Aide et didacticiels"
test.js:38 1 "https://www.mozilla.org/fr/firefox/customize/" "Personnaliser Firefox"
test.js:38 2 "https://www.mozilla.org/fr/contribute/" "Contribuer"
test.js:38 3 "https://www.mozilla.org/fr/about/" "À propos de Mozilla"
test.js:32 *******
test.js:33 titre = Importé depuis Google Chrome
test.js:34 -------
test.js:38 0 "https://github.com/johnnymcnugget/d3-bilevelLabels" "johnnymcnugget/d3-bilevelLabels · GitHub"
etc. (200+)

EDIT

Pour Chrome : "Favoris" => "Gestionnaire de favoris" => menu trois points à droite => "Exporter les favoris"

Le même code JS donne :

DOM ready : 2018-08-04T21:53:50.702+0200
test.js:23 Window load : 2018-08-04T21:53:50.886+0200
test.js:32 *******
test.js:33 titre = Barre de favoris
test.js:34 -------
test.js:38 1 "https://contacts.google.com/" "Contacts"
etc. (800+)

[Beginner.]

Merci.
J'ai essayé de tester ton code mais il utilise des fonctions spéciales dont tu n'as pas donné le source.

Mais je devine quand même le fonctionnement et si j'ai bien compris tu affiches tous les nom de dossier (balise h3) suivi de tous les liens que contient le dossier (balise a). C'est un bon début mais avec cela on perd l'arborescence (dossier et sous dossier), on ne pourrait pas par exemple en faire un JSON ou afficher un arbre comme FF :



C'est déjà plus compliqué à faire, perso pour le faire j'ai dû parcourir tous les éléments du DOM dans l'ordre en enregistrant la profondeur (deph) pour chaque niveau...

Enfin je mets le code pour qu'on comprenne mieux ce que je veux dire : http://jsbin.com/nujivatoca/1/edit?js,console.
Je fais un affichage simple avec la bonne indentation permettant de voir l’arborescence mais c'est juste une string, ce n'est pas un HTML.
Je pense cependant qu'on peut obtenir un HTML ou un JSON avec le tableau arrayOfParentnodes :



Mais mine de rien ce n'est pas forcément évident... Mais avec le deph c'est possible.

[danielhagnoul]

[...] si j'ai bien compris tu affiches tous les nom de dossier (balise h3) suivi de tous les liens que contient le dossier (balise a). [...]

Mais non ! C'est visible en voyant le code et encore plus en regardant la sortie console ! Je boucle sur les H3, mais pour chaque H3 je parcours les liens HREF avant de passer au H3 suivant.

Si cette manière de faire ne vous convient pas, ce n'est pas grave, mais ne dites pas que mon code fait autre chose que ce qu'il fait.

Je travaille toujours dans ma page de test qui utilise les fonctions de mon fichier "https://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.8.2.js", voir mon blog.

Mais le code du test est mis entre commentaires :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`);

    // début code du test


    // fin code du test

    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});

Je ne vois pas comment faire plus clair !

J'ai l'impression que vous n'avez regardé mon code et les sorties consoles que 5 secondes. C'est votre droit ! Mais alors, abstenez-vous de le commenter.

[Beginner.]

Euh ben je ne m’attendais pas à une telle réaction, étrange, il n'y a pourtant rien de mal dans mon message, non ?

et encore plus en regardant la sortie console !
J'ai l'impression que vous n'avez regardé mon code et les sorties consoles que 5 secondes. C'est votre droit !

Euh eh bien relisez bien ce que j'ai écrit à tête reposée : "J'ai essayé de tester ton code mais il utilise des fonctions spéciales dont tu n'as pas donné le source."
Et il s'avère que j'avais raison, il manquait bel et bien le source...

Alors comment voulez-vous que je puisse regarder la console alors que je n'ai pas pu tester le code ?

Je travaille toujours dans ma page de test qui utilise les fonctions de mon fichier "https://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.8.2.js"

Ah ben ça confirme qu'il manquait un script et je suppose que j'étais censé trouver moi-même son lien, c'est ça ? Et vous savez quoi ? Eh bien croyez le ou non mais j'ai essayé de trouver ce lien mais ce fût en vain...

Sinon j'ai de nouveau essayé de tester le code avec ce script et ça bloque encore car ce script utilise lui aussi des fonctions qui se trouvent ailleurs sans doute dans un autre script.

Reconnaissez que vous m'avez pas facilité la tâche pour pouvoir tester votre code...

Je boucle sur les H3, mais pour chaque H3 je parcours les liens HREF avant de passer au H3 suivant.

Si cette manière de faire ne vous convient pas, ce n'est pas grave, mais ne dites pas que mon code fait autre chose que ce qu'il fait.

Euh ben j'étais pas loin, j'ai dit "si j'ai bien compris tu affiches tous les nom de dossier (balise h3) suivi de tous les liens que contient le dossier (balise a)"... Alors oui j'ai dit "balise a" et non "liens HREF" mais là c'est du chipotage, non ?

EDIT : je reconnais que j'aurais dû dire "chaque nom de dossier (balise h3) suivi de tous les liens..." au lieu "tous les nom de dossier (balise h3) suivi de tous les liens". Mais bon pas de quoi me sauter dessus, non ? FIN DU EDIT

Ceci dit c'est vrai qu'en fait je me suis rendu compte que la partie "...tous les liens que contient le dossier (balise a)" est erronée, cela aurait été logique mais en fait votre code fait quelque chose de moins logique : après chaque h3 il n'affiche pas seulement les liens du dossier lui correspondant mais il affiche à chaque fois non seulement tous les liens du dossier lui correspondant mais aussi tous ceux des sous dossiers du coup on n'a même pas une structure "dossier suivi de son contenu" et au final certains liens sont affichés plusieurs fois.

Ai-je mieux compris le code cette fois-ci ?

Enfin bref, en plus de ce problème de répétition des liens, je pointais surtout le fait qu'on perd l'arborescence (dossier et sous dossier) et c'est ce que je demandais et votre code ne répond pas à ma demande mais ce n'est pas un drame, il n'y pas de quoi se vexer ou se fâcher, voila c'est tout...

Merci quand même.