Système d'onglets sélectif (javascript)

Hello la compagnie !

Récemment, on m'a demandé s'il était possible d'avoir un système d'onglets juste pour la section RPG d'un forum (c'est à dire que les catégories "non rpg" ne sont pas sous formes d'onglets), et, équipée de mes minces compétences en Javascript, j'ai décidé de tenter le coup, en regardant ce qui se fait à droite et à gauche.

Du coup j'ai fait un script qui fonctionne sur les versions modernBB et phpBB2 (et probablement les autres, j'ai juste pas testé) de Forumactif.

Côté HTML, il implique d'aller modifier le template index_box, et de trouver (ou créer si besoin) l'élément qui encadre une catégorie complète et qui commence entre les commentaires <!-- BEGIN/END tablehead --> et finit entre les commentaires <!-- BEGIN/END tablefoot -->. Sur modernBB, c'est ce bout là :

Code:

<div class="forabg">

Auquel je rajoute un data-categorie-id="{catrow.tablehead.ID}" :

Code:

<div class="forabg" data-categorie-id="{catrow.tablehead.ID}">

L'important c'est ce bout que je rajoute, le reste peut changer selon les versions et les modifications que chacun fait sur son forum.

Côté script, j'ai donc écrit ceci :

(edit) Version 2, après avoir réalisé que je peux mettre un event listener sur un onglet dès sa création

Code:

/* Sélecteur qui permet d'englober une catégorie */
const selecteurCategorie = ".forabg";

/* Nom de classe à donner à la liste d'onglets et à l'onglet actif */
const classeListeOnglets = "ongletsRPG";
const classeOngletActif = "onglet-actif";

/* Liste des catégories à onglets, à éditer selon besoins */
const listeCategoriesRPG = [
    { id : "c2", titre : "Titre Premier onglet"},
    { id : "c4", titre : "Titre Deuxième onglet"}
];

const forumsRPG = listeCategoriesRPG.map(el => el.id);

/* Fonction de création d'un onglet */
const creerOnglet = (idOnglet, nomOnglet) => {
    let onglet = document.createElement("li");
    onglet.dataset.catOngletId = idOnglet;
    let contenuOnglet = document.createTextNode(nomOnglet);
    onglet.appendChild(contenuOnglet);
    onglet.addEventListener("click", (e) => {
        afficherCategorie(idOnglet);
    });
    return onglet;
};

/* Fonction d'affichage d'une catégorie */
const afficherCategorie = idCategorie => {
    forumsRPG.forEach(id => {
        document.querySelector(`${selecteurCategorie}[data-categorie-id=${id}]`).style.display = "none";
    });
    /* Affiche la catégorie sélectionnée */
    document.querySelector(`${selecteurCategorie}[data-categorie-id=${idCategorie}]`).style.display = "block";
    if(document.querySelector(`.${classeOngletActif}[data-cat-onglet-id]`))
        document.querySelector(`.${classeOngletActif}[data-cat-onglet-id]`).classList.remove(classeOngletActif);
    document.querySelector(`[data-cat-onglet-id=${idCategorie}]`).classList.add(classeOngletActif);
};

document.addEventListener('DOMContentLoaded', (event) => {

    /* Création de la liste qui contiendra les onglets */
    let htmlOnglets = document.createElement("ul");
    htmlOnglets.classList.add(classeListeOnglets);

    /* On parcourt les catégories du forum et on crée les onglets */
    document.querySelectorAll(selecteurCategorie).forEach(categorie => {
        let idCategorie = categorie.dataset.categorieId;
        if(forumsRPG.includes(idCategorie)) {
            if(forumsRPG.indexOf(idCategorie) == 0) {
                categorie.before(htmlOnglets);
            }
            htmlOnglets.appendChild(creerOnglet(idCategorie, listeCategoriesRPG[forumsRPG.indexOf(idCategorie)].titre));
        }
    });

    /* Affiche le premier onglet de la liste par défaut */
    afficherCategorie(forumsRPG[0]);

});

Ça fonctionne, ce qui est une bonne chose. Par contre, je ne suis pas encore particulièrement au point en javascript (je veux dire, je peux coder avec, de toute évidence, mais une partie de ce code est un peu basée sur le pouvoir du "au pif total") du coup j'aimerais bien avoir une seconde lecture et peut être des idées d'amélioration. Notez que je ne code qu'en javascript vanilla, pour être indépendante de JQuery et solidifier mes bases branlantes.

Du coup, questions :
- Est ce qu'il y a des parties que je peux améliorer ou simplifier, ou des failles de sécurité que je n'ai pas vues ?
- Avez vous des idées d'amélioration potentielles ?
- Ce code est destiné à des utilisateurs débutants qui doivent pouvoir l'utiliser facilement sans s'arracher les cheveux dessus, à votre avis est-ce que ça vous semble accessible ?

Merci d'avance !