104 votes

Comment utiliser getElementByClass au lieu de GetElementById en JavaScript ?

J'essaie de faire basculer la visibilité de certains éléments DIV sur un site Web en fonction de la classe de chaque DIV. J'utilise un extrait JavaScript de base pour les faire basculer. Le problème est que le script utilise seulement getElementById comme getElementByClass n'est pas pris en charge par JavaScript. Et malheureusement, je dois utiliser class et non id pour nommer les DIVs car les noms des DIVs sont générés dynamiquement par ma feuille de style XSLT en utilisant certains noms de catégories.

Je sais que certains navigateurs supportent maintenant getElementByClass mais comme Internet Explorer ne le fait pas, je ne veux pas emprunter cette voie.

J'ai trouvé des scripts utilisant des fonctions pour obtenir des éléments par classe (comme le #8 de cette page : http://www.dustindiaz.com/top-ten-javascript/ ), mais je n'arrive pas à trouver comment les intégrer avec mon toggle script.

Voici le code HTML. Les DIVs eux-mêmes sont absents car ils sont générés au chargement de la page avec XML/XSLT.

Question principale : Comment faire pour que le Toggle script ci-dessous obtienne l'élément par classe au lieu d'obtenir l'élément par ID ?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<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>

</body>
</html>

3 votes

Pourquoi n'ai-je pas utilisé jQuery depuis le début ? J'ai suivi la suggestion de @Jonathan Sampson d'utiliser jQuery, et ça marche ! (La réponse de CMS était celle que je pensais chercher, mais je n'arrivais pas à la faire fonctionner) J'ai donné un id à chaque lien, et avec jQuery je peux définir quelles classes s'affichent et quelles classes sont cachées lorsque vous cliquez sur un lien particulier. GÉNIAL ! Cette solution semble trop belle pour être vraie. jQuery semble trop beau pour être vrai. Quels sont les inconvénients de l'utilisation de jQuery ? En tant que novice, pourquoi utiliserais-je Javascript au lieu de jQuery ?

89voto

CMS Points 315406

El getElementsByClassName est maintenant supportée en natif par les versions les plus récentes de Firefox, Safari, Chrome, IE et Opera, vous pouvez créer une fonction pour vérifier si une implémentation native est disponible, sinon utilisez la méthode de Dustin Diaz :

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    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);
  }
}

Utilisation :

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

2 votes

Pourquoi utilisez-vous cette fonction interne au lieu d'un simple code ?

0 votes

-1 par exemple l'utilisation en supposant que tous les éléments de l'écran ont un affichage en bloc. Dans toggle_visibility, si e est un <span>, alors il devrait être 'inline' et non 'block'. Une solution beaucoup plus robuste consiste à définir une classe CSS : .invisible { display : none !important } et à utiliser JavaScript (ou jQuery) pour assigner et désassigner cette classe aux éléments.

82voto

Jonathan Sampson Points 121800

Les navigateurs modernes prennent en charge document.getElementsByClassName . Vous pouvez consulter la liste complète des fournisseurs qui proposent cette fonctionnalité à l'adresse suivante caniuse . Si vous souhaitez étendre la prise en charge aux navigateurs plus anciens, vous pouvez envisager d'utiliser un moteur de sélection comme celui de jQuery ou un polyfill.

Réponse plus ancienne

Vous voudrez vérifier dans jQuery qui permettra ce qui suit :

$(".classname").hide(); // hides everything with class 'classname'

Google propose un fichier source jQuery hébergé, de sorte que vous pouvez le référencer et être opérationnel en quelques instants. Incluez les éléments suivants dans votre page :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

1 votes

Bien que bon, le jQuery hébergé par Google n'est utile que pour les choses les plus simples, en raison de la sécurité contre les scripts intersites mise en place par la plupart des navigateurs modernes.

2 votes

Vous pouvez également télécharger le fichier source depuis jQuery.com et le référencer localement.

22 votes

@Paulo : Cross-site scripting n'est pas applicable pour <script> tags. Google hosted jQuery est conçu spécifiquement pour les sites de production (en tant que CDN). Si votre site est https, veillez simplement à utiliser la version https pour éviter l'avertissement de contenu mixte.

7voto

Vishwa Points 572
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

En général, en utilisant getElementsByClassName, on obtient un tableau de plusieurs classes. En effet, le même nom de classe peut être utilisé dans plus d'une instance dans la même page HTML. Nous utilisons l'id de l'élément du tableau pour cibler la classe dont nous avons besoin, dans mon cas, il s'agit de la première instance du nom de la classe donnée.

4voto

Utilisez-le pour accéder aux classes en Javascript.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

2voto

Cawas Points 3303

En ajoutant Réponse de la CMS il s'agit d'une approche plus générique de toggle_visibility Je viens de me servir :

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X