javascripts学习笔记（五）：用js来实现缩略语列表、文献来源链接和快捷键列表。

1 缩略语列表问题出发点：一段包含大量缩略语的文本，例如：

<p>
        The <abbr title="World Wide Web Consortium">W3C</abbr> defines
        the <abbr title="Document Object Model">DOM</abbr> as:
    </p>
    <blockquote cite="http://www.w3.org/DOM/">
      <p>
        A platform- and language-neutral interface that will allow programs
        and scripts to dynamically access and update the
        content, structure and style of documents.
      </p>
    </blockquote>
    <p>
        It is an <abbr title="Application Programming Interface">API</abbr>
        that can be used to navigate <abbr title="HyperText Markup Language">HTML</abbr>
        and <abbr title="eXtensible Markup Language">XML</abbr> documents.
    </p>

缩略语标签的title属性在浏览器里是隐藏的，不同浏览器对缩略语的默认呈现样式是不同的，那么这多少都会影响用户的体验。一个比较好的解决方法是，将这些缩列语通过列表的方式展示出来。如：

<dl>
	<dt>缩略语标题/abbr.lastChild.nodeValue</dt>
	<dd>缩略语定义描述/abbr.getAttribute</dd>
	......
</dl>

　　用DOM来创建这个列表（即用js来动态创建html标记，常见的方法见javascript学习笔记（四）：事件处理函数和动态创建html标记。），大致过程如下：

（1）遍历abbr
   （2）保存abbr的title属性和文本
   （3）创建定义列表元素dl
   （4）创建定义标题元素dt
   （5）将abbr的文本插入到这个dt元素
   （6）创建定义描述元素dd
   （7）将abbr的title属性插入到这个dd元素
   （9）追加以上创建的各元素

代码如下：

 function displayAbbreviations() {
     //注释1：注意这里没有对DOM方法做兼容性检查
     var abbreviations = document.getElementsByTagName("abbr");
     var defs = new Array();//注释2：用数组的键值对来保存abbr的title属性和文本
     //loop through the abbr list
     for (var i=0; i<abbreviations.length; i++) {
         var current_abbr = abbrevaitons[i];
         //注释3：if (current_abbr.childNodes.length < 1) continue;
         var defination = current_abbr.getAttributes("title");
         var key = current_abbr.lastChild.nodeValue;
         defs[key] = defination;
     }
     var dlist = document.createElement("dl");
     //loop through the defs
     for (key in defs) {
         var defination = defs[key];
         var dtitle = document.createElement("dt");
         var dtitle_text = document.createTextNode(key);
         dtitle.appendChild(dtitle_text);
         var ddesc = document.createElement("dd");
         var ddesc_text = document.createTextNode(defination);
         ddesc.appendChild(ddesc_text);
         dlist.appendChild(dtitle);
         dlist.appendChild(ddesc);
     }
     //注释4：if (dlist.childNodes.length < 1) return false;
     var header = document.createElement("h2");
     var header_text = document.createElement("Abbreviations");
     header.appendChild(header_text);
     //注释5：下面两行用到了HTML-DOM属性：document.body，也可以用DOM core的 document.getElementsByTagName("body")[0]方法;
     document.body.appendChild(header);
     document.body.appendChild(dlist);
 }

displayAbbreviations有很多改进的余地，比如注释1提到的DOM方法兼容性检查问题。还有就是IE6不支持<abbr>的问题，这个问题可以通过增加注释3和注释5中的语句来解决。注释3解决了IE6及之前的版本的IE在统计abbr元素节点时总是返回0的问题，注释5则解决了浏览器不支持abbr元素而出现js报错的问题。

2  动态创建文献来源链接的实现方法和缩列语列表的方法大致相同

<blockquote> 标签定义块引用，它有一个可选的cite属性，这个属性规定了引用的来源。该属性的值是一个包含在引号中并指向某个网页的 URL地址。这个属性很有用，它可以将文献资料和相关网页链接起来。但主流浏览器均不支持 cite 属性，一般都会将它忽略，用户也看不到。

将1中的html代码中 <blockquote> 的cite属性以链接的形式显示出来，代码如下：

 function displayCitations() {
　　　　//兼容性检查
     if (!document.getElementsByTagName || !document.createElement
         || !document.createTextNode) return false;
     //获取所有的blockquote元素
     var quotes = document.getElementsByTagName("blockquote");
     //1 遍历blockquote元素
     for (var i=0; i<quotes.length; i++) {
         // 检查是否存在cite属性
         if (!quotes[i].getAttribute("cite")) continue;
         // 2 提取cite属性的值
         var url = quotes[i].getAttribute("cite");
         // 获取blockquote包含的所有元素节点，注意是元素节点，这样就把文本节点排除掉了
         var quoteChildren = quotes[i].getElementsByTagName("*");
         // 判断元素是否为空
         if (quoteChildren.length < 1) continue;
         var elem = quoteChildren[quoteChildren.length - 1];//获取最后一个元素节点
         var link = document.createElement("a");//3 创建链接节点
         var link_text = document.createTextNode("source");
         link.appendChild(link_text);
         link.setAttribute("href", url);//4 给链接节点的href属性赋值
         var superscript = document.createElement("sup");
         superscript.appendChild(link);
         elem.appendChild(superscript);//5 追加节点到<blockquote>包含节点的末尾
     }
 }

3  accesskey 属性可以将<a>链接与键盘的特定按键关联在一起，如：<a href="index.html" accesskey="1">Home</a>，不过好像不是所有的浏览器都支持这个属性，比如Opera。

将下面html代码中的accesskey属性像上面缩列语以列表的形式展示出来。

<ul id="navigation">
      <li><a href="index.html" accesskey="1">Home</a></li>
      <li><a href="search.html" accesskey="4">Search</a></li>
      <li><a href="contact.html" accesskey="0">Contact</a></li>
    </ul>

代码如下：

 function displayAccesskeys() {
   if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
 // get all the links in the document
   var links = document.getElementsByTagName("a");
 // create an array to store the accesskeys
   var akeys = new Array();
 // loop through the links
   for (var i=0; i<links.length; i++) {
     var current_link = links[i];
 // if there is no accesskey attribute, continue the loop
     if (current_link.getAttribute("accesskey") == null) continue;
 // get the value of the accesskey
     var key = current_link.getAttribute("accesskey");
 // get the value of the link text
     var text = current_link.lastChild.nodeValue;
 // add them to the array
     akeys[key] = text;
   }
 // create the list
   var list = document.createElement("ul");
 // loop through the accesskeys
   for (key in akeys) {
     var text = akeys[key];
 //  create the string to put in the list item
     var str = key + " : "+text;
 // create the list item
     var item = document.createElement("li");
     var item_text = document.createTextNode(str);
     item.appendChild(item_text);
 // add the list item to the list
     list.appendChild(item);
   }
 // create a headline
   var header = document.createElement("h3");
   var header_text = document.createTextNode("Accesskeys");
   header.appendChild(header_text);
 // add the headline to the body
   document.body.appendChild(header);
 // add the list to the body
   document.body.appendChild(list);
 }
 addLoadEvent(displayAccesskeys);

最后实现的网页效果如下：