Comment récupérer des éléments par classe en JavaScript lorsque getElementByClass n'est pas pris en charge ?

Obtention d'éléments par classe en JavaScript

En JavaScript, la méthode getElementById est couramment utilisée pour récupérer des éléments par leurs identifiants uniques. Cependant, certains scénarios nécessitent de récupérer des éléments en fonction de leurs noms de classe, et comme JavaScript ne prend pas en charge nativement getElementByClass, une approche alternative est nécessaire.

Méthode Dustin Diaz :

Une méthode pour récupérer des éléments par classe est la fonction créée par Dustin Diaz :

<code class="javascript">function getElementByClass(searchClass, node) {
  if (node == null) {
    node = document;
  }

  var classElements = [];
  var els = node.getElementsByTagName("*");
  var elsLen = els.length;
  var pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)", "i");
  var i;
  var j = 0;

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

  return classElements;
}</code>

Utilisation :

Cette fonction peut être utilisée en conjonction avec le script bascule fourni dans la question :

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementByClass(className, document);
  var 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>

Méthode native :

Dans les versions récentes des principaux navigateurs comme Firefox, Chrome, IE et Opera, la méthode getElementsByClassName est prise en charge nativement. Cela simplifie le processus de récupération des éléments par classe :

<code class="javascript">function getElementsByClassName(className, node) {
  if (node.getElementsByClassName) {
    return node.getElementsByClassName(className);
  } else {
    // Use Dustin Diaz method as fallback
    return getElementByClass(className, node);
  }
}</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!