Javascript: Filtrare il DOM con query XPath

In questo articolo mostrerò come poter agilmente ed efficacemente eseguire query XPath in Javascript per selezionare nodeset, o gruppi di nodi, dal DOM di un documento XML caricato attraverso una chiamata AJAX.

Il file XML oggetto degli esempi è serra.xml, mentre per quanto concerne gli script Javascript di esempio saranno validi solo per il parser di IE poichè gli
oggetti Node espongono il metodo selectNodes, differentemente da FireFox che invece non ne possiede uno così immediato e renderebbe più difficile la comprensione dell'argomento.

Il metodo JavaScript selectNodes(xpath) appartiene alla classe Node del DOM e ha queste caratteristiche:

• accetta come parametro un'espressione XPath;
• restituisce una NodeList contenente i nodi rispondenti ai criteri di selezione utilizzati;

Nel seguente esempio faccio uso della funzione Javascript loadXml(url) descritta in un precedente articolo:

<script type="text/JavaScript" language="JavaScript">
   var doc = loadXml("serra.xml");

   //piante contiene tutti gli elementi 
   //<pianta> del documento XML
   var piante = doc.selectNodes("/pianta");
<script>

Ora proporrò due esempi nei quali estrarrò dal DOM del file XML serra.xml solo i nodi XML che descrivono le piante per esterno, ovvero i nodi <pianta> che hanno il nodo figlio <esterno> settato a 'true'.

Nel primo esempio, per raggiungere lo scopo utilizzerò solo il DOM con uno script JavaScript:

<script type="text/JavaScript" language="JavaScript">
   var doc = loadXml("serra.xml");
   
   //piante contiene tutti gli elementi 
   //<pianta> del documento XML
   var piante = doc.getElementsByTagName("pianta");
 
   for(var i=0;i<piante.length;i++){
      //nodo <pianta>
      var pianta = piante[i]; 
      
      //verifico il contenuto del 
      //nodo figlio <esterno>
      if(pianta.getElementsByTagName("esterno")[0].text 
          == 'true'){
       .....
      } 
   }   
<script>

Nel secondo esempio invece estrarrò tutte le piante da esterno utilizzando una query XPath come parametro di ingresso al metodo selectNodes(qry):

<script type="text/JavaScript" language="JavaScript">
   var doc = loadXml("serra.xml");
   var piante_da_esterno = 
      doc.selectNodes("//piante/pianta[esterno = 'true']");   
<script>

Et Voilat: non c'è paragone!

L'espressione XPath "//piante/pianta[esterno = 'true']" contiene infatti tutta la logica che avremmo dovuto esprimere navigando il DOM nodo per nodo.

E' innegabile che la conoscenza di XPath e' un asso nella manica da potersi giocare, insomma non e' da sottovalutare.

Alla prossima,
MA.