back to top

Microdata DOM API

Il significato di inserire informazioni aggiuntive negli elementi è tipicamente quello di utilizzarle per mostrarle all’utente. Esiste quindi un modo per accedervi tramite script, le microdata DOM APIs.

Per ottenere la lista di items è necessario ricorrere al metodo document.getItems(typeNames) che ritorna una NodeList contenente gli items del tipo indicato o tutti qualora non fosse fornito il parametro typeNames. Ovviamente ogni item è rappresentato da ogni elemento del DOM che possegga un attributo itemscope.

Utilizziamo come base un esempio della lezione precedente:

<div itemscope itemtype="http://esempi.it/navi">
  <p>La <span itemprop="classe">Nimitz</span> è una tipologia di navi militari che comprende alcune portaerei nucleari.</p>
</div>

Recuperiamo i microdata:

// # Recupero la lista di Items con itemtype = http://esempi.it/navi
var listaItems = document.getItems("http://esempi.it/navi");

Accedere alle proprietà è molto semplice, basta utilizzare l’attributo properties dell’item, che ritorna una lista di oggetti HTMLPropertiesCollection:

// # Recupero la lista di Items con itemtype = http://esempi.it/navi
var listaItems = document.getItems("http://esempi.it/navi");
var shipClass  = listaItems.properties["classe"][0].itemValue;

Ho preparato un esempio più articolato, generosamente commentato e che fa uso di jQuery:

<!doctype html>
<html>
  <head>
    <script src="jquery.js"></script>
    <script>
    
      // # Al DOM Ready
      $(function() {
      
        // # Recupero la lista di Items
        // # c'è un unico itemtype (http://esempi.it/tecnologie)
        // # quindi non è necessario specificarlo
        var listaItems = document.getItems();
      
    // # Ciclo gli items
    for (var item = 0; item < listaItems.length; item++) {
      
          // # Recupero le properties
      var properties = listaItems[item].properties;
  
      // # Scelgo solo tech
      var techProps  = properties[ "tech" ];
      
      // # Ottengo la lista dei valori
      var techValues = techProps.getValues();
      
      // # Li appendo al div con id = "microdata_data", wrappati da tags p
      for (var pos = 0; pos < techValues.length; pos++) { 
    $("#microdata_data").append("<p>" + techValues[pos] + "</p>")
      }
      
        }
      });
    </script>
  </head>
  <body>
    <div itemscope itemtype="http://esempi.it/tecnologie">
      <p>Mi chiamo <span itemprop="nome">Marco</span> <span itemprop="cognome">Bianchi</span></p>
      <p>Conosco <span itemprop="tech">Java</span></p>
      <p>Ho utilizzato <span itemprop="tech">PHP5</span> e <span itemprop="tech">jQuery</span></p>
    </div>
    <h2>Tecnologie conosciute</h2>
    <div id="microdata_data"></div>
  </body>
</html>

Ecco il risultato mostrato in Firefox:

microdata

L’esempio ci permette di capire come accedere ai valori della properties; l’operazione avviene tramite il metodo getValues() chiamato sulla property.

È possibile accedere anche ai nomi delle properties attraverso l’attributo names:

var listaItems = document.getItems();

// # Ciclo gli items
for (var item = 0; item < listaItems.length; item++) {
 
  // # Recupero le properties
  var properties = listaItems[item].properties;
 
  // # Recupero la lista dei nomi
  var names = properties.names;
 
  for(i = 0; i < names.length; i++) {
 $("#microdata_data").append("<p>" +  names[i] + "</p>")
  }
}

Il codice appenderà le stringhe, nome, cognome e tech al div con id="microdata_data".

Chiudiamo la nostra lezione sui microdata analizzando più da vicino la signature delle interfacce coinvolte:

partial interface Document { 
  NodeList getItems(optional DOMString typeNames); // microdata
};

partial interface HTMLElement {
  // microdata 
           attribute boolean itemScope;
  [PutForwards=value] readonly attribute DOMSettableTokenList itemType;
           attribute DOMString itemId;
  [PutForwards=value] readonly attribute DOMSettableTokenList itemRef;
  [PutForwards=value] readonly attribute DOMSettableTokenList itemProp;
  readonly attribute HTMLPropertiesCollection properties;
           attribute any itemValue;
};

Abbiamo già visto gli attributi ed i metodi negli esempi, rimane da evadere una nota per itemValue; element.itemValue [ = value ] è il getter/setter per il valore del singolo elemento

Pubblicità
Articolo precedente
Articolo successivo

In questa guida...