Mr. Webmaster Menu
  • Home
  • Cerca
  • Didattica
    • A
    • Android
    • Apache
    • Apple
    • ASP
    • ASP.Net
    • C
    • Cloud
    • CMS
    • CSS
    • D
    • Database
    • E
    • Editor
    • G
    • Grafica
    • H
    • Hosting
    • HTML
    • J
    • Java
    • Javascript
    • jQuery
    • L
    • Leggi e Fisco
    • Linux
    • M
    • Mobile
    • MySQL
    • N
    • NET Framework
    • P
    • Photoshop
    • PHP
    • Primi Passi
    • Programmazione
    • R
    • Reti
    • Ruby
    • S
    • Sicurezza
    • Social Media
    • SQL
    • W
    • Web Design
    • Web Marketing
    • Web Server
    • Windows
    • WordPress
    • X
    • XML
    • Di tendenza
    • Android Studio
    • Bootstrap
    • GDPR
    • Hosting Wordpress
    • Node.js
    • Registrazione Domini
  • Download
    • Software
    • Script
    • Plugin CMS
    • Flash Movies
    • Sound Loops
    • Templates
    • Web Grafica
    • Font Gratis
  • Risorse
    • SEO Tools
    • WebApps
  • News
  • Blog
  • Forum
  • Network
    • Toolset.it
    • SiteMarket.it
    • Codalo.it
  • Corsi on-line
Mr. Webmaster → HTML → Guida HTML5 → Microdata - le API

Microdata - le API

  • CommentaScrivi un commento
  • ForumDiscuti sul forum
  • PrecedenteMicrodata - i fondamenti
  • SuccessivoWebstorage
  • Pubblicato il
  • 22/02/2012
  • Autore
  • Riccardo Brambilla

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.

Continua dopo la pubblicità...

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

Sfoglia le lezioni

← Microdata - i fondamenti
→ Webstorage

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
Frequenta i nostri corsi
  • Corso HTMLCorso HTML
    Il linguaggio di markup delle pagine web. A partire da 29 €
  • Corso HTML5Corso HTML5
    Creare pagine web di ultima generazione sfruttando la potenza di HTML5. A partire da 49 €
  • Corso Web DesignCorso Web Design
    Webdesign e Responsive Design dei siti Web. A partire da 49 €
Vedi anche...
  • Nuovi elementi in HTML5 - meter e time
  • Nuovi elementi in HTML5 - ruby, rt, rb, bdi e wbr
  • Nuovi elementi in HTML5 - [ menu ] e command
  • Nuovi elementi in HTML5 - details e summary
  • Nuovi elementi in HTML5 - datalist, keygen ed output
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie
Altro: sondaggi / feed