JavaScript: DOM Selectors API

Le Selectors API hanno aggiunto due nuovi metodi all'arsenale DOM di JavaScript: querySelector() e querySelectorAll(). Questi due nuovi metodi dell'oggetto document consentono di selezionare elementi usando un'espressione CSS come argomento. La differenza tra i due metodi è che il primo restituisce un solo elemento mentre il secondo seleziona una collezione di elementi. Vediamo alcuni esempi.

querySelector()

La soluzione più ovvia è quella di passare un selettore di ID a questo metodo:

var elemento = document.querySelector('#test');

Come si può notare, l'espressione CSS ha la stessa sintassi di un qualsiasi selettore CSS. Possiamo tuttavia usare altre espressioni che restituiscano un riferimento univoco ad un elemento:

var elemento = document.querySelector('#test p:first-child');

In questo caso viene selezionato il primo paragrafo di una struttura DOM come la seguente:

<div id="test">
  <p>...</p>
  <p>...</p>
</div>

Quando accediamo ad un elemento con questi metodi, possiamo usare tutti i metodi e le proprietà DOM associati all'elemento o agli elementi:

alert(elemento.firstChild.nodeValue);

querySelectorAll()

Questo metodo restituisce una collezione di elementi. Per esempio:

var paragrafi = document.querySelectorAll('#test p');

Da cui consegue che è possibile operare un ciclo sui paragrafi:

for(var i = 0; i < paragrafi.length; i += 1) {

  var testo = paragrafi[i].firstChild.nodeValue;
  
  alert(testo);

}

Il risultato è del tutto simile a quello che potremmo ottenere con il metodo getElementsByTagName() ma con un'importante differenza: con questo nuovo metodo possiamo operare su elementi arbitrari aventi anche attributi, non solo su singole tipologie di elementi:

var titled = document.querySelectorAll('a[title]');

In questo caso abbiamo selezionato tutti gli elementi a aventi un'attributo title impostato. Con getElementsByTagName() avremmo invece dovuto scrivere:

var links = document.getElementsByTagName('a');
var titled = [];

for(var i = 0; i < links.length; i += 1) {

  var link = links[i];
  
  if(link.hasAttribute('title')) {
  
    titled.push(link);
  
  }


}

Interazione con documenti XML

Alcuni selettori CSS non funzioneranno con i documenti XML. Dato che i selettori di classe e di ID hanno bisogno di una DTD di riferimento per poter funzionare e dato che XML non ha una DTD predefinita, questi selettori non funzioneranno. Ci sono due soluzioni:

1. usare i selettori di attributo o i selettori contestuali
2. specificare un namespace XHTML sul documento XML in uso:

   
   <?xml version="1.0" encoding="UTF-8"?>
   <root xmlns="http://www.w3.org/1999/xhtml">
   
     ...
   
   </root>
   

La seconda soluzione farà in modo che i browser utilizzino la DTD predefinita di XHTML, permettendo così di usare i selettori di classe e di ID.

Supporto dei browser

Tutti i browser supportano le Selectors API. Internet Explorer le supporta dalla versione 8 in poi.