Obtenir une liste filtrée d'éléments HTML avec JavaScript

Concept et utilisation

La fonction elFilter() permet d'obtenir une liste filtrée d'éléments HTML d'une page web.

Fonction

elFilter()

Retourne une liste d'éléments HTML sur laquelle est appliqué un filtre.

Syntaxe
elFilter(elements, filtre);
Paramètres
elements(NodesList)

Le paramètre elements de la fonction elFilter() définit la liste des éléments HTML à filtrer.

filtre(Function, String)

Le paramètre filtre de la fonction elFilter() définit le filtre à appliquer sur la liste des éléments HTML, qui peut être spécifié sous deux formes :

  • une fonction de tri applicable à chaque élément passé en argument,
  • un sélecteur CSS à vérifier pour chaque élément.

Exemple d'obtention d'une liste filtrée d'éléments HTML

Voici deux exemples de filtrage d'éléments HTML avec les deux méthodes, renvoyant le même résultat.

Exemple 1 : utilisation d'un filtre sous forme de fonction

var elements = document.childNodes;
var filtre = function(n) {
  return n.nodeType === 1;
};

elFilter(elements, filtre);

// renvoie : [html]

Exemple 2 : utilisation d'un filtre sous forme de sélecteur CSS

var elements = document.childNodes;
var filtre = 'html';

elFilter(elements, filtre);

// renvoie : [html]

Code source de la fonction

function elFilter(n, m) {
  var a = [];
  for (var i = 0, j = n.length; i < j; i++) {
    var b = n[i];
    if(typeof m === 'function') {
      if (m(b)){
        a.push(b);
      }
    } else if (typeof m === 'string') {
      if ((b.nodeType === 1 || b.nodeType === 9) && b.matches(m)) {
        a.push(b);
      }
    }
  }
  return a;
}

Dernière mise à jour le .

^