Comment récupérer des éléments par classe en JavaScript lorsque getElementByClass n'est pas pris en charge ?-js tutoriel-php.cn

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

Barbara Streisand

Libérer： 2024-11-07 03:07:02

original

278 Les gens l'ont consulté

How do you retrieve elements by class in JavaScript when getElementByClass is not supported?

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!