Sélectionner les éléments de l’interface
Objectif : Récupérer les éléments nécessaires au gestionnaire et détecter les sélecteurs qui ne correspondent à rien.
Pour rendre le gestionnaire interactif, votre JavaScript doit d’abord retrouver les éléments présents dans la page. Un sélecteur incorrect peut laisser une fonctionnalité sans cible ou provoquer une erreur plus tard, au moment où le code tente d’utiliser cette cible. Vous allez centraliser les sélections et vérifier les éléments indispensables dès le démarrage.
La leçon précédente a établi le point d’entrée du projet dans js/main.js et son chargement comme module. Ici, vous utilisez document.querySelector() pour obtenir le premier élément correspondant à un sélecteur CSS. Si aucun élément ne correspond, la méthode renvoie null : il faut donc contrôler le résultat avant de s’en servir.
Sélectionner les éléments indispensables
Les attributs data-* déjà présents dans le HTML fournissent des points de repère précis. Par exemple, [data-formulaire] cible le formulaire d’ajout et [data-liste] cible la liste des tâches. Ces sélecteurs évitent de dépendre du texte visible ou de la mise en forme ; ils ne modifient pas la page.
Pour les éléments qui doivent exister, rassemblez les résultats dans un objet et vérifiez-les avant de poursuivre. Cette vérification transforme un problème de sélecteur en message explicite, au lieu de laisser une erreur moins compréhensible apparaître dans une autre partie du programme. Le code ci-dessous interrompt volontairement le démarrage si une cible essentielle manque.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gestionnaire de tâches</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="js/main.js"></script>
</head>
<body class="atelier-page">
<header class="atelier-entete">
<h1>Gestionnaire de tâches</h1>
<p>Organisez vos tâches et suivez votre progression.</p>
</header>
<main class="atelier-principal">
<section class="atelier-progression" aria-labelledby="titre-progression">
<h2 id="titre-progression">Progression</h2>
<p><span data-progression-texte>0 tâche terminée sur 0</span></p>
<progress class="atelier-progression__barre" data-progression max="100" value="0">0%</progress>
</section>
<form class="atelier-formulaire" data-formulaire>
<label for="nouvelle-tache">Nouvelle tâche</label>
<input class="atelier-champ" id="nouvelle-tache" name="titre" type="text" required>
<button class="atelier-bouton" type="submit">Ajouter</button>
</form>
<div class="atelier-actions">
<div class="atelier-filtres" role="group" aria-label="Filtrer les tâches">
<button class="atelier-bouton" type="button" data-filtre="toutes" aria-pressed="true">Toutes</button>
<button class="atelier-bouton" type="button" data-filtre="actives" aria-pressed="false">À faire</button>
<button class="atelier-bouton" type="button" data-filtre="terminees" aria-pressed="false">Terminées</button>
</div>
<button class="atelier-bouton" type="button" data-charger>Charger des tâches</button>
</div>
<p class="atelier-message" data-message role="status" aria-live="polite"></p>
<ul class="atelier-liste" data-liste aria-label="Liste des tâches"></ul>
<template data-modele-tache>
<li class="atelier-tache" data-id="">
<input type="checkbox" data-action="basculer">
<span data-titre></span>
<button class="atelier-bouton" type="button" data-action="supprimer">Supprimer</button>
</li>
</template>
</main>
</body>
</html>Voici le fichier JavaScript complet à cet état du projet. La fonction nommée selectionnerElements() retourne les références utiles après contrôle ; afficherDemarrage() les récupère et affiche un résumé dans la console. Les sélections sont regroupées dans un seul endroit, ce qui facilite leur vérification si le HTML évolue.
export function selectionnerElements() {
const elements = {
formulaire: document.querySelector("[data-formulaire]"),
champTitre: document.querySelector("#nouvelle-tache"),
liste: document.querySelector("[data-liste]"),
progression: document.querySelector("[data-progression]"),
texteProgression: document.querySelector("[data-progression-texte]"),
message: document.querySelector("[data-message]"),
modeleTache: document.querySelector("[data-modele-tache]"),
boutonCharger: document.querySelector("[data-charger]")
};
const nomsManquants = Object.entries(elements)
.filter(function (entree) {
return entree[1] === null;
})
.map(function (entree) {
return entree[0];
});
if (nomsManquants.length > 0) {
throw new Error("Éléments DOM introuvables : " + nomsManquants.join(", "));
}
elements.filtres = document.querySelectorAll("[data-filtre]");
if (elements.filtres.length === 0) {
throw new Error("Aucun bouton de filtre n’a été trouvé.");
}
return elements;
}
export function afficherDemarrage() {
const elements = selectionnerElements();
console.info("Interface prête :", elements.filtres.length, "filtres trouvés.");
}
afficherDemarrage();Interface prête : 3 filtres trouvés.Sélectionner plusieurs éléments
querySelector() ne renvoie qu’un élément, même si plusieurs éléments correspondent au sélecteur. Pour récupérer tous les boutons portant data-filtre, utilisez querySelectorAll() : le résultat est une collection de nœuds, ici appelée filtres. Sa propriété length permet de vérifier qu’au moins un bouton a été trouvé.
Le code conserve également une référence au champ de saisie avec son identifiant nouvelle-tache. Le formulaire et le champ sont deux éléments distincts : les sélectionner séparément permet de choisir ensuite précisément la zone concernée. Vous avez aussi des références au message, à la progression, au modèle de tâche et au bouton de chargement, sans encore leur attribuer de comportement.
Pour vérifier le résultat, ouvrez la page dans le navigateur et consultez la console des outils de développement. Le message indique que trois filtres ont été trouvés. Pour tester la détection d’un sélecteur absent, vous pouvez temporairement modifier un attribut dans le HTML ; le démarrage affichera alors le nom de l’élément manquant dans l’erreur.
À retenir
querySelector()renvoie le premier élément correspondant ounull.querySelectorAll()récupère tous les éléments correspondants ; vérifiez que sa collection n’est pas vide.- Regroupez les sélections dans une fonction et signalez clairement les éléments indispensables absents.
- Sélectionnez séparément les éléments que vous utiliserez à des fins différentes, comme le formulaire et son champ.
Dans la prochaine leçon, vous construirez les éléments d’une tâche à partir du modèle fourni, sans injecter de HTML risqué.