[html5] r3081 - [e] (0) more intro text for microdata
whatwg at whatwg.org
whatwg at whatwg.org
Mon May 11 01:19:29 PDT 2009
Author: ianh
Date: 2009-05-11 01:19:28 -0700 (Mon, 11 May 2009)
New Revision: 3081
Modified:
index
source
Log:
[e] (0) more intro text for microdata
Modified: index
===================================================================
--- index 2009-05-11 03:47:10 UTC (rev 3080)
+++ index 2009-05-11 08:19:28 UTC (rev 3081)
@@ -669,7 +669,8 @@
<ol>
<li><a href=#the-basic-syntax><span class=secno>5.1.1 </span>The basic syntax</a></li>
<li><a href=#typed-items><span class=secno>5.1.2 </span>Typed items</a></li>
- <li><a href=#selecting-names-when-defining-vocabularies><span class=secno>5.1.3 </span>Selecting names when defining vocabularies</a></ol></li>
+ <li><a href=#selecting-names-when-defining-vocabularies><span class=secno>5.1.3 </span>Selecting names when defining vocabularies</a></li>
+ <li><a href=#using-the-microdata-dom-api><span class=secno>5.1.4 </span>Using the microdata DOM API</a></ol></li>
<li><a href=#encoding-microdata><span class=secno>5.2 </span>Encoding microdata</a>
<ol>
<li><a href=#the-microdata-model><span class=secno>5.2.1 </span>The microdata model</a></li>
@@ -40672,6 +40673,9 @@
putting the <code title=attr-item><a href=#items:-the-item-attribute>item</a></code> attribute on the
element that declares the property.</p>
+ <p>Items that are not part of others are called <a href=#top-level-microdata-items>top-level
+ microdata items</a>.</p>
+
<div class=example>
<p>In this example, the outer item represents a person, and the
@@ -40682,11 +40686,14 @@
<p>Band: <span property="band" item> <span property="name">Jazz Band</span> (<span property="size">12</span> players)</span></p>
</div></pre>
- <p>In this example, the outer item has two properties, "name" and
- "band". The "name" is "Amanda", and the "band" is an item in its own
- right, with two properties, "name" and "size". The "name" of the
- band is "Jazz Band", and the "size" is "12".</p>
+ <p>The outer item here has two properties, "name" and "band". The
+ "name" is "Amanda", and the "band" is an item in its own right,
+ with two properties, "name" and "size". The "name" of the band is
+ "Jazz Band", and the "size" is "12".</p>
+ <p>The outer item in this example is a top-level microdata
+ item.</p>
+
</div>
<p>Properties don't have to be given as ancestors of the element
@@ -40763,13 +40770,13 @@
<p>For this purpose, it is necessary to give each <a href=#concept-item title=concept-item>item</a> a type, such as "person", or "cat",
or "band". Types are identified in three ways:</p>
- <ul class=brief><li>As <a href=#url title=URL>URLs</a>
+ <ul class=brief><li>As <a href=#url title=URL>URLs</a>.
<li>As <a href=#valid-reversed-dns-identifier title="valid reversed DNS identifier">reversed DNS
- labels</a>
+ labels</a>.
<!--
- <li>Using the names of <span>predefined types</span>
+ <li>Using the names of <span>predefined types</span>, which are described below.
-->
</ul><p><a href=#url title=URL>URLs</a> are self-explanatory. <a href=#valid-reversed-dns-identifier title="valid reversed DNS identifier">Reversed DNS labels</a> are
@@ -40779,6 +40786,10 @@
as the value of the <code title=attr-item><a href=#items:-the-item-attribute>item</a></code>
attribute.</p>
+ <p>When using custom typed items, the property names are also given
+ in the form of <a href=#url title=URL>URLs</a> or <a href=#valid-reversed-dns-identifier title="valid
+ reversed DNS identifier">reversed DNS labels</a>.</p>
+
<div class=example>
<p>Here, the item is "org.example.animals.cat":</p>
@@ -40790,14 +40801,46 @@
<img property="org.example.img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
</section></pre>
+ <p>In this example the "org.example.animals.cat" item has three
+ properties, an "org.example.name" ("Hedral"), an "org.example.desc"
+ ("Hedral is..."), and an "org.example.img" ("hedral.jpeg").</p>
+
</div>
- <p>When using custom typed items, the property names are also given
- in this form.</p>
+ <p>An item can have several types, in the same way that an element
+ can declare several properties at once.</p>
-<!--
- <p><span>Predefined types</span> are described below.</p>
--->
+ <div class=example>
+
+ <p>Here, the item is both an "org.example.animals.cat" and a "com.example.feline":</p>
+
+<pre><section item="org.example.animal.cat com.example.feline">
+ <h1 property="org.example.name com.example.fn">Hedral</h1>
+ <p property="org.example.desc">Hedral is a male american domestic
+ shorthair, with a fluffy <span
+ property="com.example.color">black</span> fur with <span
+ property="com.example.color">white</span> paws and belly.</p>
+ <img property="org.example.img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
+</section></pre>
+
+ <p>This example has one item with two types and the following
+ properties:</p>
+
+ <table><thead><tr><td>Property
+ <td>Value
+ <tbody><tr><td>org.example.name
+ <td>Hedral
+ <tr><td>com.example.fn
+ <td>Hedral
+ <tr><td>org.example.desc
+ <td>Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.
+ <tr><td>com.example.color
+ <td>black
+ <tr><td>com.example.color
+ <td>white
+ <tr><td>org.example.img
+ <td>.../hedral.jpeg
+ </table></div>
@@ -40829,8 +40872,41 @@
</div>
+ <h4 id=using-the-microdata-dom-api><span class=secno>5.1.4 </span>Using the microdata DOM API</h4>
+ <p>The microdata becomes even more useful when scripts can use it to
+ expose information to the user, for example offering it in a form
+ that can be used by other applications.</p>
+ <p>The <code title=dom-document-items><a href=#dom-document-items>document.items</a></code> DOM
+ attribute provides access to all the <a href=#top-level-microdata-items>top-level microdata
+ items</a>.</p>
+
+ <p>Each <a href=#concept-item title=concept-item>item</a> is represented in the
+ DOM by the element on which the relevant <code title=attr-item><a href=#items:-the-item-attribute>item</a></code> attribute is found. The various types
+ that the element has can be obtained using the <code title=dom-item><a href=#dom-item>element.item</a></code> DOM attribute, which returns a
+ <code><a href=#domsettabletokenlist-0>DOMSettableTokenList</a></code> object.</p>
+
+ <div class=example>
+
+ <p>This sample code shows a function that returns all the top-level
+ microdata items of the type that it is passed:</p>
+
+ <pre>function getItems(type) {
+ var result = [];
+ for (var i = 0; i
+
+ <p>This function can be used to get all the "com.example.feline"
+ items as follows:</p>
+
+ <pre>var cats = getItems("com.example.feline");</pre>
+
+ </pre></div>
+
+ <!-- XXX ... -->
+
+
+
<h3 id=encoding-microdata><span class=secno>5.2 </span>Encoding microdata</h3>
<h4 id=the-microdata-model><span class=secno>5.2.1 </span>The microdata model</h4>
Modified: source
===================================================================
--- source 2009-05-11 03:47:10 UTC (rev 3080)
+++ source 2009-05-11 08:19:28 UTC (rev 3081)
@@ -45889,6 +45889,9 @@
putting the <code title="attr-item">item</code> attribute on the
element that declares the property.</p>
+ <p>Items that are not part of others are called <span>top-level
+ microdata items</span>.</p>
+
<div class="example">
<p>In this example, the outer item represents a person, and the
@@ -45899,11 +45902,14 @@
<p>Band: <span property="band" item> <span property="name">Jazz Band</span> (<span property="size">12</span> players)</span></p>
</div></pre>
- <p>In this example, the outer item has two properties, "name" and
- "band". The "name" is "Amanda", and the "band" is an item in its own
- right, with two properties, "name" and "size". The "name" of the
- band is "Jazz Band", and the "size" is "12".</p>
+ <p>The outer item here has two properties, "name" and "band". The
+ "name" is "Amanda", and the "band" is an item in its own right,
+ with two properties, "name" and "size". The "name" of the band is
+ "Jazz Band", and the "size" is "12".</p>
+ <p>The outer item in this example is a top-level microdata
+ item.</p>
+
</div>
<p>Properties don't have to be given as ancestors of the element
@@ -45985,13 +45991,13 @@
<ul class="brief">
- <li>As <span title="URL">URLs</span>
+ <li>As <span title="URL">URLs</span>.
<li>As <span title="valid reversed DNS identifier">reversed DNS
- labels</span>
+ labels</span>.
<!--
- <li>Using the names of <span>predefined types</span>
+ <li>Using the names of <span>predefined types</span>, which are described below.
-->
</ul>
@@ -46004,6 +46010,10 @@
as the value of the <code title="attr-item">item</code>
attribute.</p>
+ <p>When using custom typed items, the property names are also given
+ in the form of <span title="URL">URLs</span> or <span title="valid
+ reversed DNS identifier">reversed DNS labels</span>.</p>
+
<div class="example">
<p>Here, the item is "org.example.animals.cat":</p>
@@ -46015,14 +46025,58 @@
<img property="org.example.img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
</section></pre>
+ <p>In this example the "org.example.animals.cat" item has three
+ properties, an "org.example.name" ("Hedral"), an "org.example.desc"
+ ("Hedral is..."), and an "org.example.img" ("hedral.jpeg").</p>
+
</div>
- <p>When using custom typed items, the property names are also given
- in this form.</p>
+ <p>An item can have several types, in the same way that an element
+ can declare several properties at once.</p>
-<!--
- <p><span>Predefined types</span> are described below.</p>
--->
+ <div class="example">
+
+ <p>Here, the item is both an "org.example.animals.cat" and a "com.example.feline":</p>
+
+<pre><section item="org.example.animal.cat com.example.feline">
+ <h1 property="org.example.name com.example.fn">Hedral</h1>
+ <p property="org.example.desc">Hedral is a male american domestic
+ shorthair, with a fluffy <span
+ property="com.example.color">black</span> fur with <span
+ property="com.example.color">white</span> paws and belly.</p>
+ <img property="org.example.img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
+</section></pre>
+
+ <p>This example has one item with two types and the following
+ properties:</p>
+
+ <table>
+ <thead>
+ <tr>
+ <td>Property
+ <td>Value
+ <tbody>
+ <tr>
+ <td>org.example.name
+ <td>Hedral
+ <tr>
+ <td>com.example.fn
+ <td>Hedral
+ <tr>
+ <td>org.example.desc
+ <td>Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.
+ <tr>
+ <td>com.example.color
+ <td>black
+ <tr>
+ <td>com.example.color
+ <td>white
+ <tr>
+ <td>org.example.img
+ <td>.../hedral.jpeg
+ </table>
+
+ </div>
@@ -46057,8 +46111,48 @@
</div>
+ <h4>Using the microdata DOM API</h4>
+ <p>The microdata becomes even more useful when scripts can use it to
+ expose information to the user, for example offering it in a form
+ that can be used by other applications.</p>
+ <p>The <code title="dom-document-items">document.items</code> DOM
+ attribute provides access to all the <span>top-level microdata
+ items</span>.</p>
+
+ <p>Each <span title="concept-item">item</span> is represented in the
+ DOM by the element on which the relevant <code
+ title="attr-item">item</code> attribute is found. The various types
+ that the element has can be obtained using the <code
+ title="dom-item">element.item</code> DOM attribute, which returns a
+ <code>DOMSettableTokenList</code> object.</p>
+
+ <div class="example">
+
+ <p>This sample code shows a function that returns all the top-level
+ microdata items of the type that it is passed:</p>
+
+ <pre>function getItems(type) {
+ var result = [];
+ for (var i = 0; i < document.items.length; i += 1) {
+ if (document.items[i].item.has(type))
+ result.push(document.items[i]);
+ }
+ return result;
+}</pre>
+
+ <p>This function can be used to get all the "com.example.feline"
+ items as follows:</p>
+
+ <pre>var cats = getItems("com.example.feline");</pre>
+
+ </div>
+
+ <!-- XXX ... -->
+
+
+
<h3>Encoding microdata</h3>
<h4>The microdata model</h4>
More information about the Commit-Watchers
mailing list