A Clarification for RDFa in the Browser

On International Talk Like a Pirate Day , September 19th, I happen to post my RDFa in the Browser entry about using Green Turtle .  I have received some feedback about my use of “typed links” when demonstrating RDFa in action.

The content in question was this:

<a href="http://www.milowski.com/#alex" typeof="http://example.org/PersonRef">Alex Milowski</a>

The clarification is simple:

Now, the code was a bit terse and used a shortcut as the subject and the href property of the anchor element are the same. This code could be expanded for clarity as such:

// 1. Get the anchor element(s) by type
var links = document.getElementsByType("http://example.org/PersonRef");

// 2. Since there are possibly more than one, we'll loop:
for (var i=0; i<links.length; i++) {

   // Change the click link behavior
   links[i].onclick = function() {

      // this.data.id holds the subject which is the same as this.href

      // Get the property values from the RDFa graph
      var alumniOf = document.data.getValues(this.data.id,"http://schema.org/alumniOf");
      var affiliation = document.data.getValues(this.data.id,"http://schema.org/affiliation");

      // Do something with them!
      alert("Currently at "+affiliation+", alumni of "+alumniOf);
      return false;
  }

}

Here it is in action, again:

The point here is that you can go back and forth between the triples graph generated by RDFa annotations and elements in the document.  In this example, I'm using the graph to find elements for which I want to modify behavior and then using the graph again to get additional information from elsewhere in the document (i.e. the alumni and affiliation encoded in a div somewhere on the page).

At minimum, I think this is a neat and useful technique.