利用JavaScript充实文档的内容

本文任务：
1、为网页文档创建“缩略词语表”的函数
2、为网页文档创建“文献来源链接”的函数
3、为网页文档创建“快速访问键清单”的函数

一、鼠标指定，显示“缩略词语”citations
如图：

explanation.html完整代码：（只要是<abbr>标签的作用）

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="en" >
   < head >
     < meta  http-equiv ="content-type"  content ="text/html; charset=utf-8"   />
     < title > Explaining the Document Object Model </ title >

   </ head >
   < body >
     < h1 > What is the Document Object Model? </ h1 >
     < 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 >
   </ body >
</ html >

2、显示“缩略词语表”
如图：

explanation.html完整代码：（和第一步一样，就多了在</head>前面添加两行代码）

     < script  type ="text/javascript"  src ="scripts/addLoadEvent.js" ></ script >
     < script  type ="text/javascript"  src ="scripts/displayAbbreviations.js" ></ script >

addLoadEvent.js完整代码：

function  addLoadEvent(func)  ... {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') ...{
    window.onload = func;
  } else ...{
    window.onload = function() ...{
      oldonload();
      func();
    }
  }
}

displayAbbreviations.js完整代码：

function  displayAbbreviations()  ... {
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the abbreviations
  var abbreviations = document.getElementsByTagName("abbr");
  if (abbreviations.length < 1) return false;
  var defs = new Array();
// loop through the abbreviations
  for (var i=0; i<abbreviations.length; i++) ...{
    var current_abbr = abbreviations[i];
    if (current_abbr.childNodes.length < 1) continue;
    var definition = current_abbr.getAttribute("title");
    var key = current_abbr.lastChild.nodeValue;
    defs[key] = definition;
  }
// create the definition list
  var dlist = document.createElement("dl");
// loop through the definitions
  for (key in defs) ...{
    var definition = defs[key];
// create the definition title
    var dtitle = document.createElement("dt");
    var dtitle_text = document.createTextNode(key);
    dtitle.appendChild(dtitle_text);
// create the definition description
    var ddesc = document.createElement("dd");
    var ddesc_text = document.createTextNode(definition);
    ddesc.appendChild(ddesc_text);
// add them to the definition list
    dlist.appendChild(dtitle);
    dlist.appendChild(ddesc);
  }
  if (dlist.childNodes.length < 1) return false;
// create a headline
  var header = document.createElement("h2");
  var header_text = document.createTextNode("Abbreviations");
  header.appendChild(header_text);
// add the headline to the body
  document.body.appendChild(header);
// add the definition list to the body
  document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);

3、显示“快速访问键清单”
如图：


在第二步的基础上添加个displayAccesskeys.js：

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);

以上的效果在FireFox正常显示，在ＩＥ可能会有麻烦，这个历史原因（要追溯到当年微软和网景的那场大战）。不过这不影响本文的意义：
本文提供了一个基本你思路：用JavaScript函数先把文档结构里的一些现有信息提取出来，再把那些信息以
一种清晰和有意义的方式重新插入到网页文档去。