Création d'une treeview

Version imprimable

Bonjour,

Je ne suis pas novice en programmation mais je suis novice en javascript. je suis en train de mettre en place un "treeview" pour m'exercer et pour mon site ( site de cours de maths en ligne pour la période de confinement)
Voici l'extrait de mon code qui pose souci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function addListeners(){ let carets= tree.getElementsByClassName("caret"); for (let i=0;i<carets.length;i++){ carets[i].addEventListener("click", function(){ this.classList.toggle("caret-down") let nestedElements =this.querySelectorAll("ul > li") console.log(nestedElements) for (let i=0;i<nestedElements.length;i++){ nestedElements[i].classList.toggle("active") } }); } }
La ligne qui pose souci est celle-ci: let nestedElements =this.querySelectorAll("ul > li") .

Avec mon console.log, je vois que tous les éléments enfants "li" sont ciblés alors que je ne veux cibler que ceux qui sont les enfants directs. Il me semblait que le sélecteur CSS "ul>li" permettait de faire cela mais je ne trouve pas de solution à mon problème. Merci d'avance pour vos éventuelles aides.

Raphaël, enseignant.

05/04/2020, 18h53
NoSmoking

Bonjour,
ton sélecteur fait ce qu'il faut, il cible les <li> enfants directs d'un élément <ul> ce qui est (devrait être) toujours le cas mais il semblerait que cela soit le premier <ul> que tu cherches à cibler, mais il nous manque donc ta structure HTML pour te montrer.

suite avec code HTML

merci tout d'abord d'avoir pris du temps pour cette première réponse.
Ce sont bien les li directs sous le ul que je cherche à cibler. Voici le code HTML qui va avec:

Code:

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
<nav id="navTree">
        <ul>
            <li> Classe de seconde
                <ul>
                    <li><a href="#">Chapitre 1</a>
                        <ul>
                            <li>doc 1</li>
                            <li>doc 2</li>
                        </ul>
                    </li>
                    <li><a href="#">Chapitre 2</a>
                        <ul>
                            <li>doc 1</li>
                            <li>doc 2</li>
                        </ul>
                    </li>
 
                </ul>
            </li>
            <li> Classe de premiere
                <ul>
                    <li><a href="#">Chapitre 1</a>
                        <ul>
                            <li>doc 1</li>
                            <li>doc 2</li>
                        </ul>
                    </li>
                    <li><a href="#">Chapitre 2</a>
                        <ul>
                            <li>doc 1</li>
                            <li>doc 2</li>
                        </ul>
                    </li>
 
                </ul>
            </li>
        </ul>

À noter que les classes n'apparaissent pas dans le code HTML: la première partie de mon script js se charge de les ajouter et cela, ça marche ( vérification faite avec l'inspecteur d'élément)

Merci d'avance pour une éventuelle réponse

05/04/2020, 22h24
Beginner.

Citation:

Envoyé par rafoim

Avec mon console.log, je vois que tous les éléments enfants "li" sont ciblés alors que je ne veux cibler que ceux qui sont les enfants directs.

C'est ce qui est fait, tu as bien les enfants directs mais de tous les ul...
05/04/2020, 22h41
rafoim

merci

Merci bien, je vais chercher comment cibler les "li" du premier niveau de mon arborescence. Je reviendrai chercher votre précieuse aide si je coince trop. En attendant, j'ai mis le sujet sur "résolu" car mon erreur d'interprétation a bien été corrigée.
05/04/2020, 23h14
Watilin

Citation:

Envoyé par rafoim

À noter que les classes n'apparaissent pas dans le code HTML: la première partie de mon script js se charge de les ajouter et cela, ça marche ( vérification faite avec l'inspecteur d'élément)

Merci d'avance pour une éventuelle réponse

Question un peu hors sujet mais, si tu as un script capable de cibler les bons éléments pour leur ajouter une classe, alors à quoi sert la classe ? :P

Pour répondre à ta question, techniquement le sélecteur ul > li est équivalent à li tout court car un élément <li> est toujours un descendant direct de <ul>.
Le détail qui nous manque encore, dans ton code, c’est à quel endroit sont ajoutées les classes "caret". En fonction de l’élément de départ (this) sur lequel est appliqué querySelectorAll, le résultat ne sera pas le même.
Si ça peut t’aider, sache que tu peux naviguer vers le haut dans l’arbre DOM avec la propriété .parentElement ou la méthode .closest().

Une autre piste de solution : tu peux essayer de ne mettre que l’instruction this.classList.toggle("caret-down") dans ta fonction, et t’arranger pour que les éléments voulus apparaissent en utilisant uniquement du code CSS ;)

Je te cite:

Citation:

" Question un peu hors sujet mais, si tu as un script capable de cibler les bons éléments pour leur ajouter une classe, alors à quoi sert la classe ? "

Je m 'inspire en fait de la méthode ici:https://www.w3schools.com/howto/howto_js_treeview.asp

j'ai voulu modifier un peu. je n'ai pas encore testé mais je crois que leur méthode ne fonctionne que si on est dans une totale imbrication des répertoires et des sous-répertoires, pas pour un arbre plus général ( deux entrées de niveau supérieures par exemple).

je tente aussi de modifier une chose: je ne veux pas avoir à écrire les classes dans mon html d'où l'insertion par js. Voici le script complet avec la fonction qui insère les classes:
Code:

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 function prepareTree(){ let treeElements = tree.getElementsByTagName("li") for (let i=0;i<treeElements.length;i++){ let l = treeElements[i].children.length if (l>0){ treeElements[i].classList.add("caret") } if (treeElements[i].parentElement.parentElement.tagName != "NAV" ){ treeElements[i].classList.add("nested") } } } function addListeners(){ let carets= tree.getElementsByClassName("caret"); for (let i=0;i<carets.length;i++){ carets[i].addEventListener("click", function(){ this.classList.toggle("caret-down") let nestedElements =this.querySelectorAll("ul > li") console.log(nestedElements) for (let i=0;i<nestedElements.length;i++){ nestedElements[i].classList.toggle("active") } }); } } let tree = document.getElementById("navTree"); prepareTree(); addListeners();
Mon code insère les classes puis les classes doivent s'ajouter ou se soustraire selon les événements. je n'ai pas compris pourquoi tu trouvais cela inutile ( j'ai senti une pointe d'ironie par contre, mais il n'y a pas de souci).
pour la navigation avec parentElement, je vais y penser. Le souci, c'est que quand je remonte au parent, ensuite, je risque de sélectionner trop de monde ( je sais, ce n'est pas très clair).

merci pour ta participation à ma recherche.

Raphaël

06/04/2020, 14h38
Invité
Citation:

Envoyé par Watilin

...techniquement le sélecteur ul > li est équivalent à li

Oui et non, soyons précis :
- ul > li signifie : les li "descendants directs" de ce ul.
- li cible "tous les li", où et quels qu'ils soient.
Certes, ul > li (sans plus de précision) est équivalent à li.

Mais, selon cette configuration :
Code:

1 2 3 4 5 6 7 8 9 <ul id="menu"> <li>..... menu 1 <ul> <li>..... sous-menu 1.1</li> <li>..... sous-menu 1.2</li> </ul> </li> <li>..... menu 2</li> </ul>
Pour cibler les "bons" <li>, on doit indiquer de quel <ul> on parle :
- ul#menu > li ne cible QUE les menus (car "descendants directs"), mais PAS les sous-menus.
- Pour cibler les sous-menus, on peut utiliser ul#menu > li > ul > li (sous-menus de niveau 1), ul#menu ul > li (tous les sous-menu, quel que soit leur niveau, sous-sous-menu,...)

Cela dit... pour corriger ton code :

Code:

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
"use strict";
const tree = document.getElementById("navTree");
 
prepareTree(tree); // remarque : au cas où on peut avoir plusieurs "trees", on passe le "tree" en paramètre des fonctions.
addListeners(tree);
 
function prepareTree(tree)
{
  let tree_elts = tree.querySelectorAll("li");
  tree_elts.forEach( elt => {
    if( elt.querySelector("ul") ) // si on a un sous-menu (présence de ul dans le li)
    {
      elt.classList.add("caret"); // ajoute "caret" au li
      elt.querySelector("ul").classList.add("nested"); // ajoute "nested" au ul enfant du li
    }
  });
}
 
function addListeners(tree)
{
  var togglers = tree.querySelectorAll(".caret");
  togglers.forEach( elt => {
    elt.addEventListener("click", function(event) {
      event.stopPropagation(); // IMPORTANT (stoppe la propagation de l évènement)
      this.querySelector("ul.nested").classList.toggle("active");
      this.classList.toggle("caret-down");
    });
  }); 
}

Pourquoi faire « compliqué » et ne pas plutôt cibler les <ul> qui si ils sont enfants d'un <li> ils ne sont pas à la racine et donc « expandable ».

J'avais fait un truc comme
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /** * Gestion expand/collapse */ const elementsUL = document.querySelectorAll("ul"); elementsUL.forEach((el) => { const parent = el.parentNode; if( "LI" === parent.tagName){ const oBtn = document.createElement("BUTTON"); oBtn.className = "btn-close"; parent.appendChild( oBtn); oBtn.addEventListener("click", (e) => { e.stopPropagation(); parent.classList.toggle("collapse"); }); } });
avec un soupçon de CSS sur les boutons

06/04/2020, 16h31
Invité

@NoSmoking,

si tu suis le lien donné en référence, tu verras que les classes "caret", "nested" ont déjà leur CSS.

D'où l'intérêt de les ajouter dynamiquement ;) (sans besoin de créer de nouveaux élements du DOM)

Ça donne: https://codepen.io/jreaux62/pen/BaNXyMd

Remarque : la différence avec le modèle :

Code:

<li><span class="caret">Beverages</span>

Ici, on met la classe directement sur le <li>

Code:

<li class="caret">Beverages
06/04/2020, 16h42
NoSmoking

Citation:

Envoyé par jreaux62

(sans besoin de créer de nouveaux élements du DOM)

parce que dans l'exemple fourni il n'y a pas d'élément superflus comme les <span> !

Citation:

Envoyé par rafoim

je tente aussi de modifier une chose: je ne veux pas avoir à écrire les classes dans mon html d'où l'insertion par js. Voici le script complet avec la fonction qui insère les classes:

c'est à cela que sert l'utilisation du JavaScript, de tout faire d'un coup, et ce en une seule fonction.

@NoSmoking
Ben justement... on est d'accord, non ? :aie:

code HTML minimum (sans <span>, ni classes)
JS qui "fait le job" (avec une seule fonction) ;)

Je poste le code (simplifié) de mon exemple : https://codepen.io/jreaux62/pen/BaNXyMd
(au cas où je supprime - plus tard - mon Codepen)

Code:

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
<nav id="navTree">
  <ul>
    <li> Classe de seconde
      <ul>
        <li><a href="#">Chapitre 1</a>
          <ul>
            <li>doc 1</li>
            <li>doc 2</li>
          </ul>
        </li>
        <li><a href="#">Chapitre 2</a>
          <ul>
            <li>doc 1</li>
            <li>doc 2</li>
          </ul>
        </li>
 
      </ul>
    </li>
    <li> Classe de premiere
      <ul>
        <li><a href="#">Chapitre 1</a>
          <ul>
            <li>doc 1</li>
            <li>doc 2</li>
          </ul>
        </li>
        <li><a href="#">Chapitre 2</a>
          <ul>
            <li>doc 1</li>
            <li>doc 2</li>
          </ul>
        </li>
 
      </ul>
    </li>
  </ul>
</nav>

Code:

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
 /* Remove default bullets */
ul, #navTree {
  list-style-type: none;
}
 
/* Remove margins and padding from the parent ul */
#navTree {
  margin: 0;
  padding: 0;
}
 
/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}
 
/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
 
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}
 
/* Hide the nested list */
.nested {
  display: none;
}
 
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}

Code:

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
"use strict";
// ----------
// au chargement de page
window.addEventListener('DOMContentLoaded', function(){
  const tree = document.getElementById("navTree");
  setTreeView(tree); // remarque : au cas où on peut avoir plusieurs "trees", on passe le "tree" en paramètre
});
// ----------
function setTreeView(tree)
{
  let tree_elts = tree.querySelectorAll("li");
  tree_elts.forEach( elt => {
    if( elt.querySelector("ul") ) // si on a un sous-menu (présence de ul dans le li)
    {
      elt.classList.add("caret"); // ajoute "caret" au li
      elt.querySelector("ul").classList.add("nested"); // ajoute "nested" au ul enfant du li
    }
  });
  let togglers = tree.querySelectorAll(".caret");
  togglers.forEach( elt => {
    elt.addEventListener("click", function(event) {
      event.stopPropagation(); // IMPORTANT (stoppe la propagation de l évènement)
      this.querySelector("ul.nested").classList.toggle("active");
      this.classList.toggle("caret-down");
    });
  }); 
}
/* --------- */

VARIANTE (version "Objet") :

Code:

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
"use strict";
// ----------
// au chargement de page
window.addEventListener('DOMContentLoaded', function(){
  const tree = document.getElementById("navTree");
  TreeView.init(tree); // on passe le "tree" en paramètre
});
// ----------
// Définition de l objet
var TreeView = {
	// --------
	// Initialisation
	init:function(tree)
	{
    let tree_elts = tree.querySelectorAll("li");
    tree_elts.forEach( elt => {
      if( elt.querySelector("ul") ) // si on a un sous-menu (présence de ul dans le li)
      {
        elt.classList.add("caret"); // ajoute "caret" au li
        elt.querySelector("ul").classList.add("nested"); // ajoute "nested" au ul enfant du li
      }
    });
    let togglers = tree.querySelectorAll(".caret");
    togglers.forEach( elt => {
      elt.addEventListener("click", function(event) {
        event.stopPropagation(); // IMPORTANT (stoppe la propagation de l évènement)
        this.querySelector("ul.nested").classList.toggle("active");
        this.classList.toggle("caret-down");
      });
    }); 
  }
	// --------
};
// ----------

Citation:

Envoyé par jreaux62

Ben justement... on est d'accord, non ? :aie:

Certes mais sur la façon d'y arriver, je trouve plus simple de cibler les éléments <ul> plutôt que <li>, ce qui te permet d'avoir un code plus concis.
Ce que je trouvais compliqué était surtout le fait qu'une fois un élément trouvé on ne l'utilise pas complétement et qu'il faille faire deux boucles pour arriver à ses fins.

En prenant les classes utilisées dans ton exemple cela donnerait si je ne me trompe pas
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 const elementsUL = document.querySelectorAll("ul"); elementsUL.forEach((el) => { const parent = el.parentNode; if ("LI" === parent.tagName) { el.classList.add("nested") parent.className = "caret"; parent.addEventListener("click", (e) => { e.stopPropagation(); parent.classList.toggle("caret-down"); el.classList.toggle("active"); }); } });
je pense même qu'il y aurait moyen de mettre les deux classes, nested et caret, sur le même élément.

06/04/2020, 20h11
Invité

Citation:

Envoyé par NoSmoking

je pense même qu'il y aurait moyen de mettre les deux classes, nested et caret, sur le même élément.

https://www.youtube.com/watch?v=3w5cwBrvtf4

:aie:
07/04/2020, 11h22
Watilin
Citation:

Envoyé par rafoim

je n'ai pas compris pourquoi tu trouvais cela inutile ( j'ai senti une pointe d'ironie par contre, mais il n'y a pas de souci).

C’était une vraie question, désolé si ça sonnait ironique, ce n’était pas mon intention. L’information que je n’avais pas était celle-ci :

Citation:

je ne veux pas avoir à écrire les classes dans mon html

… Ce qui est une raison parfaitement valable.

Je souligne juste un point délicat dans ton code :

Code:

if (treeElements[i].parentElement.parentElement.tagName != "NAV" ){

Ici, tu as un enchaînement .parentElement.parentElement qui est « rigide » et cassera dès la première modification de la structure HTML. Ok, tu n’as sans doute pas prévu de modifier le HTML, et je comprends l’intention de remonter exactement 2 niveaux. Mais en l’occurence, je pense qu’on peut se passer complètement de la classe "nested" en la remplaçant, à la fois dans le code CSS et dans le code JS, par un simple sélecteur ul ul. Je sais que je contredis W3Schools (ça ne sera pas la première fois :roll:)

Citation:

pour la navigation avec parentElement, je vais y penser. Le souci, c'est que quand je remonte au parent, ensuite, je risque de sélectionner trop de monde ( je sais, ce n'est pas très clair).

Si si ça me semble clair :) Bien sûr, rien ne t’empêche de combiner des trucs comme .parentElement.querySelectorAll( ... ).

Ah, une précision peut-être utile : quand tu écris this.querySelectorAll("ul > li"), le sélecteur CSS n’est pas limité au sous-arbre de this. Je m’explique : pour résoudre un querySelectorAll, le moteur JS fait deux choses :
1. il établit la liste des enfants de l’élément ciblé ;
2. il invoque le moteur de filtrage CSS pour tester le sélecteur "ul > li" sur chacun des enfants.
Le moteur CSS n’a pas connaissance de « l’élément de base » de querySelectorAll, et il peut remonter plus haut si besoin quand il y a une relation de descendance à tester.
Par exemple, this.querySelectorAll("nav li") fonctionne parce qu’il y a un élément <nav> plus haut dans l’arbre, même si c’est au-dessus de l’élément this.

Citation:

Envoyé par jreaux62

(au cas où je supprime - plus tard - mon Codepen)

Je te remercie d’avoir pensé au “link rot” ;)
07/04/2020, 19h15
rafoim

merci encore

merci pour toutes les idées que vous m'avez données. La lecture de vos conseils et de vos débats va me prendre du temps.
Ne pensez-vous pas qu'il serait préférable de renommer ce fil avec un titre comme " bâtir un treeview en javascript"?
Pour d'autres que cela intéresserait bien sûr.
Bonne soirée.

Raphaël