利用js来实现缩略语列表、文献来源链接和快捷键列表

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

 The W3C defines
 the DOM as:
 
 

 

 A platform- and language-neutral interface that will allow programs
 and scripts to dynamically access and update the
 content, structure and style of documents.
 
 
 

 It is an API
 that can be used to navigate HTML
 and XML documents.
 

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

 
缩略语标题/abbr.lastChild.nodeValue
 
缩略语定义描述/abbr.getAttribute
 ......

用DOM来创建这个列表（即用js来动态创建html标记，常见的方法见 详解js的事件处理函数和动态创建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

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

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

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

将1中的html代码中

的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包含节点的末尾
 }
}

3  accesskey 属性可以将链接与键盘的特定按键关联在一起，如：Home，不过好像不是所有的浏览器都支持这个属性，比如Opera。

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

 
Home
 
Search
 
Contact
 

代码如下：

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！