HTML and CSS Reference
In-Depth Information
properties
—An array that gives you access to values through an
itemValue
property on each member.
❂
names
—An array of property names.
❂
You can examine all three with a simple loop:
for (var i = 0; i < md.length; i++) {
log('Found: ' + md[i].itemType);
for (var j = 0; j < md[i].properties.length; j++) {
log(md[i].properties.names[j] + ': '
+ md[i].properties[j].itemValue);
}
}
The
log
function writes the string parameter out on the page so you can
examine the output. Here are the results of running that code on the
previous example markup:
Found: http://microformats.org/profile/hcard
fn: A.J.
n: AJ
photo: http://www.userfriendly.org/cartoons/cartoons/aj/
headshot_aj.gif
email: mailto:aj@userfriendly.org
Note that the
itemValue
property performed a useful service for you
because it understands how to get the value from different types of ele-
ments. For the
fn
property on the
<h1>
element, it returned the text con-
tent of the element; for the
n
property on the
<meta>
element, it returned
the value of the
content
attribute; for
photo
on
<img>
, it returned the
src
value; and for
email
on an
<a>
element, it returned the
href
.
The email value is incorrect: emails shouldn't have
mailto:
appended to
the front of them. You might also want to use the subproperties of
n
,
such as
given-name
and
family-name
. Let's adjust the markup:
<h1 itemprop="fn">
<span itemprop="n" itemscope>
<span itemprop="given-name">A</span>.
<span itemprop="family-name">J</span>.
</span>
