Écrire des règles JS qui survivent aux changements du DOM
Vous avez écrit une règle, elle a marché une semaine, aujourd'hui elle s'est arrêtée. La page n'a pas cassé — elle a juste renommé une classe de .btn-primary en .Button_primary_x7f3. Voici comment écrire des règles qui survivent à de tels changements.
Pourquoi les règles cassent
Une règle s'accroche au DOM d'une page que vous ne contrôlez pas. Chaque refonte, chaque build avec un nouveau hash de classe, chaque test A/B peut vous faire bouger le sol sous les pieds. Vous ne pouvez pas l'éliminer — vous pouvez le limiter.
Règle 1 — visez ce qui est stable
Sélecteurs du plus au moins durable :
- Le mieux : les attributs sémantiques —
[aria-label],[role],[name],[type],[data-testid]. Ils changent rarement, car ils portent du sens. - Bien : les balises et leur structure —
nav a,main > article. - Risqué : les classes lisibles par un humain —
.sidebar,.cookie-banner. - Le pire : les classes hachées —
.css-1a2b3c,.jsx-987. Générées au build, changées à chaque déploiement.
Règle 2 — visez par le texte quand les classes échouent
Le texte visible par l'utilisateur change moins souvent que les classes CSS. Au lieu d'attraper un bouton par sa classe, trouvez-le par son contenu :
const btn = [...document.querySelectorAll('button')]
.find(b => /enregistrer|envoyer|save|submit/i.test(b.textContent || ''));Règle 3 — vérifiez toujours que l'élément existe
Une règle qui suppose qu'un élément est là explosera le jour où il manque — et tuera souvent le reste de son propre code. Écrivez défensivement :
const el = document.querySelector('.target');
if (el) {
// travail ici
}L'opérateur ?. le fait de façon concise : document.querySelector('.target')?.remove() ne fait rien quand l'élément est absent — au lieu de lever une erreur.
Règle 4 — laissez la règle crier quand elle se perd
La pire panne est une panne silencieuse — la règle ne marche pas et vous ne savez pas pourquoi. Ajoutez un signal :
const el = document.querySelector('.target');
if (!el) JUSTZIX.warn('Règle X : .target introuvable — page changée ?');Une entrée dans l'Output Console vous dit aussitôt qu'il est temps de corriger le sélecteur — au lieu de deviner.
À voir aussi
- MutationObserver dans les règles — résistance aux changements dans le temps
- Output Console comme logger — où atterrissent les signaux des règles
- Motifs d'URL — la résistance commence par la correspondance
Installez JustZix — et écrivez des règles qui ne cassent pas au prochain déploiement de la page.
Notez cet article
Aucune note — soyez le premier.