DOM Selectors API e supporto dei browser

Esordiamo con una buona notizia: Internet Explorer 9 supporterà  questa caratteristica. Gli altri browser già  lo fanno da tempo e tutti in modo coerente con le specifiche W3C. Ma, ci si chiederà , a cosa servono queste API? Per rispondere alla domanda, prendiamo in considerazione un breve frammento HTML:

<ul id="test">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

Vogliamo selezionare la seconda voce nella lista. Con i CSS è possibile scrivere:

#test li:nth-child(2) {}

Da questa considerazione e anche a fronte dei successi ottenuti da librerie quali jQuery, il W3C ha deciso di implementare la sintassi CSS nell'attraversamento del DOM. Quindi ora possiamo scrivere:

window.onload = function() {
var element = document.querySelector('#test li:nth-child(2)');
 alert(element.firstChild.nodeValue); // 'B'
};

In questo caso il metodo querySelector() restituisce un riferimento ad un singolo nodo elemento. Se avessimo voluto ottenere una NodeList di nodi elemento, avremmo dovuto utilizzare invece il metodo querySelectorAll():

window.onload = function() {
var element = document.querySelectorAll('#test lì);
 alert(element[1].firstChild.nodeValue); // 'B'
};

Non appena IE9 avrà  cominciato a prendere piede, potremo utilizzare appieno questa nuova risorsa.