Charl van Niekerk » Blog: Parsing an hCard using getElementsByClassName in Firefox 3

Main

Latest

Parsing an hCard using getElementsByClassName in Firefox 3

Actually this slipped past me, but I discovered today that Firefox 3 now has a built-in implementation of getElementsByClassName which might help reduce your script library size. Well, perhaps not yet, but as soon as most of the other browsers also support it. I think Opera already does, didn't test though.

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Charl van Niekerk: Contact</title>
 </head>
 <body>
  <h1>Charl van Niekerk: Contact</h1>
  <div class="vcard">
   <ul>
    <li>Name: <span class="fn">Charl van Niekerk</span></li>
    <li>E-mail: <a class="email" href="mailto:charlvn@charlvn.za.net">charlvn@charlvn.za.net</a></li>
    <li><span class="tel"><span class="type">Cell</span> (South Africa): <span class="value">+27 72 405 8378</span></span></li>
    <li><span class="tel"><span class="type">Cell</span> (Botswana): <span class="value">+267 7457 5943</span></span></li>
    <li>Website: <a class="url" href="http://charlvn.za.net/">http://charlvn.za.net/</a></li>
   </ul>
  </div>
  <script type="application/javascript">
   function getFullName() {
    hCards = document.getElementsByClassName("vcard");
    for (var i = 0; i < hCards.length; i++) {
     fn = hCards[i].getElementsByClassName("fn");
     alert("Full Name: " + fn[0].textContent);
    }
   }
  </script>
  <form>
   <input type="button" value="Get Full Name" onclick="getFullName()">
  </form>
 </body>
</html>

Hopefully this will give Microformats another boost. RDF does unfortunately involve some complexity but this is semantic web technology at its simplest. :)

Main

Latest

Archives

Parsing an hCard using getElementsByClassName in Firefox 3

0 Comments