JavaScript: filtrare gli elementi del DOM

jQuery fornisce il metodo filter() per filtrare gli elementi del DOM in base a certi criteri stabiliti in una funzione di callback. Volendo fare a meno di jQuery, possiamo implementare lo stesso metodo con risultati del tutto analoghi. Vediamo come.

Definiamo la seguente funzione:

function filter(test, array) {
  var result = [], len = array.length;
  for (var i = 0; i < len; i++) {
    var current = array[i];
    if (test(current)) {
      result.push(current);
    }
  }
  return result;
}

La funzione filter() usa due parametri: il primo è la funzione di callback usata per filtrare l'array e il secondo è l'array su cui operare. Il filtraggio avviene comparando il risultato booleano restituito dalla funzione di callback con il valore corrente dell'array.

Per esempio, data la seguente struttura HTML:

<ul id="test">
	<li>1</li>
	<li>a</li>
	<li>2</li>
	<li>b</li>
	<li>3</li>
	<li>c</li>
</ul>

Vogliamo ottenere solo quelle voci di lista il cui contenuto testuale inizia con un numero. Ecco come fare:

function testValue(element) {

	return /^\d/.test(element.firstChild.nodeValue);

}

window.onload = function() {

	var elems = document.getElementById('test').getElementsByTagName('li');
	var filtered = filter(testValue, elems);
	
	for(var j = 0; j < filtered.length; j++) {
	
		console.log(filtered[j].firstChild.nodeValue);  
	
	}

};

L'output nella console sarà il seguente:

1

2

3

Abbiamo eseguito il nostro test di verifica sulla proprietà nodeValue di ciascun elemento della lista. Si noti come la funzione testValue() restituisca un valore booleano. Questa condizione è necessaria affinchè l'operazione vada a buon fine.