Pourquoi choisir « getElementsByClassName » plutôt que « getElementById » en JavaScript ?

Obtenir des éléments par classe : une alternative à getElementById en JavaScript

Dans le domaine du développement Web, la méthode getElementById règne en maître lorsqu'il s'agit pour accéder à des éléments spécifiques dans un document HTML. Cependant, il existe des cas où l'utilisation de getElementByClass peut s'avérer plus appropriée.

Avec l'émergence de navigateurs modernes comme Firefox et Chrome, getElementByClass est devenu une fonctionnalité prise en charge de manière native. Cependant, pour les navigateurs comme Internet Explorer, une solution de contournement est nécessaire pour émuler sa fonctionnalité.

Création d'une fonction getElementsByClass personnalisée

Dustin Diaz, un expert JavaScript renommé, a conçu une solution ingénieuse pour remédier au manque de support natif de getElementByClass. Son approche consiste à créer une fonction personnalisée qui imite son comportement :

<code class="javascript">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);
  }
}</code>

Intégrer la fonction avec le script Toggle

Pour intégrer de manière transparente cette fonction personnalisée avec la bascule fournie script, remplacez simplement les appels getElementById par getElementsByClassName, comme indiqué ci-dessous :

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

Conclusion

En implémentant cette fonction getElementsByClass personnalisée, vous pouvez exploiter l'attribut class pour basculer la visibilité des éléments, même lorsque la prise en charge native de getElementByClass fait défaut. Cette solution permet aux développeurs d'exploiter les avantages de l'identification des éléments basée sur les classes, garantissant ainsi un comportement cohérent sur différents navigateurs.

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!