Comment sélectionner des éléments HTML par nom de classe en JavaScript ?

Comment getElementByClass avec JavaScript ?

Question :

Vous souhaitez basculer la visibilité d'éléments DIV en fonction de leur classe à l'aide d'un extrait JavaScript. Cependant, le script actuel s'appuie sur getElementById, ce qui ne convient pas car les noms DIV sont générés dynamiquement à l'aide de XSLT.

Réponse :

Méthode getElementsByClassName :

Les navigateurs modernes prennent en charge nativement la méthode getElementsByClassName. Vous pouvez vérifier sa disponibilité et l'utiliser s'il est pris en charge.

Méthode Dustin Diaz (pour les navigateurs plus anciens) :

Pour les navigateurs plus anciens, utilisez la méthode Dustin Diaz :

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

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

Script de bascule mis à jour :

Utilisez la méthode getElementsByClassName ou la solution de secours de Dustin Diaz dans votre script de bascule :

<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';
     }
  }
}

Utilisation :

Dans votre HTML, modifiez les attributs onclick de vos liens toggle pour référencer la nouvelle fonction toggle_visibility :

<code class="html"><a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>
<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a></code>

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!