Comment récupérer plusieurs éléments avec le même identifiant en JavaScript ?

Gestion de plusieurs éléments avec le même ID en JavaScript

En JavaScript, getElementById est une méthode utilisée pour récupérer un élément en fonction de son attribut ID . Cependant, que se passe-t-il lorsque plusieurs éléments ont le même ID ?

Énoncé du problème :

Comment pouvons-nous récupérer une collection d'éléments avec le même attribut ID à l'aide de getElementById ?

Discussion et solution :

Bien qu'il ne soit pas recommandé de Si vous utilisez plusieurs identifiants identiques dans une page Web, cela peut arriver dans certains cas. Pour résoudre ce problème, nous pouvons utiliser des solutions de contournement :

Une approche consiste à utiliser querySelectorAll, qui renvoie une collection d'éléments correspondant au sélecteur spécifié. Voici un exemple :

var elms = document.querySelectorAll("[id='duplicateID']");

// Access and modify the elements as needed...

En utilisant le sélecteur CSS avec les crochets, nous pouvons récupérer tous les éléments avec la valeur ID spécifiée, même si elle apparaît plusieurs fois.

Alternativement, si nous devons utiliser getElementById exclusivement, nous pouvons récupérer de manière itérative les éléments par leurs valeurs d'ID et les ajouter à un array :

var elms = [];
var id = "duplicateID";

// Loop through all elements with the specified ID...
while (document.getElementById(id)) {
  // Add the element to the array...
  elms.push(document.getElementById(id));

  // Increment the id to avoid duplicates...
  id += "_duplicate";
}

// Access and modify the array of elements...

En incrémentant la valeur de l'ID à chaque itération, nous créons efficacement des identifiants uniques accessibles à l'aide de getElementById.

N'oubliez pas que l'utilisation de plusieurs identifiants identiques peut entraîner des comportements inattendus et ce n'est généralement pas une pratique recommandée. Cependant, ces solutions de contournement peuvent être utiles pour gérer les bases de code existantes ou lorsque vous travaillez avec des documents HTML tiers.

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!