Que se passe-t-il lorsque vous utilisez des identifiants en double en HTML ?

Éléments multiples avec le même identifiant : un voyage vers l'invalidité

Malgré les directives claires du W3C selon lesquelles deux éléments d'une page ne doivent pas partager le même identifiant, un phénomène déroutant se produit lorsque plusieurs éléments possèdent des identifiants identiques. Examinons les implications de cette anomalie.

Comportement du navigateur

Les navigateurs adoptent souvent une approche « d'échec silencieux », interprétant le code HTML non valide pour se conformer à leurs attentes. Ainsi, bien qu'il soit invalide, l'exemple HTML avec deux éléments ayant le même identifiant fonctionne dans tous les navigateurs.

Effets secondaires potentiels

Cependant, en vous écartant de la spécification, vous ouvrez la porte à conséquences imprévues. Par exemple, l'utilisation de la méthode getElementById() ne récupérera que le premier élément avec l'ID spécifié.

Une alternative plus sûre

Au lieu d'utiliser plusieurs éléments avec le même ID, utilisez des noms de classe pour le style. groupes d'éléments. Cette pratique adhère à la conception prévue des sélecteurs CSS.

Interroger des éléments avec le même ID

Si vous devez absolument sélectionner plusieurs éléments avec le même ID, vous pouvez recourir à des sélecteurs d'attribut :

document.querySelectorAll('p[id="red"]');

Notez que cette approche peut ne pas fonctionner dans les anciennes versions de navigateur telles que IE7 et ci-dessous.

Conclusion

Bien que les navigateurs puissent prendre en charge du HTML non valide, il est fortement déconseillé de s'appuyer sur un tel comportement. Pour des raisons de cohérence, de maintenabilité et pour éviter des problèmes potentiels, utilisez des noms de classe pour styliser des éléments similaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!