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:
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
