Browser-based APIs - HTML5 and CSS3 - page 180

appointments, and licenses. In this section, we'll look at how to use the
microdata API and then consider some useful applications.
So far, only Opera has implemented this API , although a Firefox
implementation is in progress.

Using a single microdata format
Here's a simple example of contact information marked up with micro-
data using the hCard vocabulary. This code, along with the script that
follows, is available in ch05/microdata-api-1.html:

<div id="aj" itemscope
itemtype="http://microformats.org/profile/hcard">
<h1 itemprop="fn">
<meta itemprop="n" content="AJ">
A.J.
</h1>
<img itemprop="photo" alt="AJ"
src="http://www.userfriendly.org/cartoons/
cartoons/aj/headshot_aj.gif" >
<a itemprop="email" href="mailto:[e-mail]">
[e-mail]
</a>
</div>

With a little added CSS , you can make the
item take on a business card-like appear-
ance, as shown at right.
Now let's look at how the item data can be
extracted with the microdata API . The
first step is to get a list of all the items in
the document:

var md = document.getItems();

The getItems() method returns a NodeList that represents all the top-
level items in the document. This NodeList has three useful properties:

itemType —Tells you what sort of item has been found. In this case,
you're expecting it to be http://microformats.org/profile/hcard as per
the itemtype attribute in the source.

❂