Comment obtenir des éléments par classe avec JavaScript sans getElementById ?

Obtenir un élément par classe avec JavaScript sans getElementById

En JavaScript, la méthode getElementById est couramment utilisée pour récupérer des éléments par leur ID unique. Cependant, lorsque vous travaillez avec des éléments générés dynamiquement ou partageant le même ID, il devient nécessaire de rechercher les éléments par leur attribut de classe. Bien que getElementByClass soit pris en charge nativement dans les navigateurs modernes, il n'est toujours pas pris en charge dans tous les principaux navigateurs, tels qu'Internet Explorer.

Utilisation d'une fonction pour obtenir des éléments par classe

JavaScript ne fournit pas de méthode intégrée pour récupérer des éléments par classe. Cependant, nous pouvons surmonter cette limitation en utilisant une fonction pour rechercher des éléments en fonction de leur attribut de classe. Une implémentation populaire est la méthode Dustin Diaz :

<code class="javascript">function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) { // native implementation available
    return node.getElementsByClassName(classname);
  } else {
    var classElements = [],
        els = node.getElementsByTagName("*"),
        elsLen = els.length,
        pattern = new RegExp("(^|\s)"+classname+"(\s|$)", "i");

    for (var i = 0, j = 0; i < elsLen; i++) {
      if ( pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
      }
    }
    return classElements;
  }
}</code>

Cette fonction prend un nœud (généralement l'objet document) et un nom de classe en entrée et renvoie un tableau d'éléments qui correspondent à la classe spécifiée. Il vérifie d’abord si la méthode native getElementsByClassName existe et, si c’est le cas, l’utilise. Sinon, il parcourt tous les éléments du nœud et vérifie si leur attribut de classe contient le nom de classe spécifié.

Intégration avec le script Toggle

Une fois que nous avons une fonction pour obtenir les éléments par classe, nous pouvons modifier notre script de bascule de visibilité pour l'utiliser :

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementsByClassName(document, className),
      n = elements.length;
  for (var i = 0; i < n; i++) {
    var e = elements[i];
    if(e.style.display == 'block') {
      e.style.display = 'none';
    } else {
      e.style.display = 'block';
    }
  }
}</code>

En remplaçant le Appel de la fonction getElementById avec la fonction getElementsByClassName, notre script peut désormais basculer la visibilité des éléments en fonction de leur attribut de classe. Cela nous permet de contrôler la visibilité des éléments générés dynamiquement sans nous fier à des identifiants uniques.

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!