《DOM Scripting》学习笔记-——第八章 充实文档的内容

本章内容

一、一个为文档创建“缩略词语表”的函数

二、一个为文档创建“文献来源链接”的函数

三、一个为文档创建“快速访问键清单”的函数

利用DOM动态的收集和创建一些有用的辅助信息，并把它们呈现在网页上的基本思路：

1、把隐藏在属性里的信息检索出来（遍历、提取）

2、把这些信息动态的创建为一些html内容（创建元素节点、将内容插入元素节点）

3、把这些html内容插入到文档里（追加）

一、一个为文档创建“缩略词语表”的函数

Html代码：

 <!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 programsand scripts to dynamically access and update thecontent, 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 
19       <abbr title="eXtensible Markup Language">XML</abbr> documents.
     </p>
   </body>
 </html>

命名：explanation.html

目的：创建“缩略词语表”，把html文档中<abbr>标签的title属性值收集起来，并将其集中显示在页面里。

具体步骤及实现方法：

js代码：

function displayAbbreviations() 
 {
  if (!document.getElementsByTagName || !document.createElement
    || !document.createTextNode) return false;
    // 获取abbr元素
  var abbreviations = document.getElementsByTagName("abbr");
  if (abbreviations.length < 1) return false;
  var defs = new Array();
    // 遍历abbr元素并获取abbr元素值及其title属性
  for (var i=0; i<abbreviations.length; i++) 
   {
     var current_abbr = abbreviations[i];
     var definition = current_abbr.getAttribute("title");
     var key = current_abbr.lastChild.nodeValue;
     defs[key] = definition;
   }
  // 创建dl元素
  var dlist = document.createElement("dl");
  // 遍历abbr元素值及其title属性
  for (key in defs) 
   {
     var definition = defs[key];
  // 创建dt元素、文本节点，将文本节点插入dt元素
     var dtitle = document.createElement("dt");
     var dtitle_text = document.createTextNode(key);
     dtitle.appendChild(dtitle_text);
  // 创建dd元素、文本节点，将文本节点插入dd元素
     var ddesc = document.createElement("dd");
     var ddesc_text = document.createTextNode(definition);
     ddesc.appendChild(ddesc_text);
  // 追加
     dlist.appendChild(dtitle);
     dlist.appendChild(ddesc);
   }
// 创建大标题
  var header = document.createElement("h2");
  var header_text = document.createTextNode("Abbreviations");
  header.appendChild(header_text);
// 将标题追加到html文档
  document.body.appendChild(header);
// 将dl元素追加到html文档
  document.body.appendChild(dlist);
}

二、显示“文献来源链接表”

收集和显示blockquote元素的cite属性所包含的信息：

（1）遍历这个文档里所有的blockquote元素。

（2）从blockquote元素提取出cite属性值

（3）创建一个标识文本是“source”的链接

（4）把这个链接赋值为blockquote元素的cite属性值

（5）把这个链接插入到文献节选的末尾

js代码

function displayCitations()
  {
    if (!document.getElementsByTagName || !document.createElement|| !document.createTextNode) return false;
    // 获取所有的blockquote元素
    var quotes = document.getElementsByTagName("blockquote");
    //遍历所有blockquote元素
    for (var i=0; i<quotes.length; i++) 
      {
        // 如果节点没有cite属性，就跳转到下一次循环的开始，不再继续执行本次循环中的后续语句
        if (!quotes[i].getAttribute("cite")) continue;
        // 把cite属性值存入变量url
        var url = quotes[i].getAttribute("cite");
        // 获取所有的元素节点（不用lastChild，因为有些浏览器会把换行符当做文本节点）
        var quoteChildren = quotes[i].getElementsByTagName('*');
        / /如果没有元素节点，就跳到下一次循环的开始
        if (quoteChildren.length < 1) continue;
        // 获取blockquote的最后一个元素
        var elem = quoteChildren[quoteChildren.length - 1];
        // 创建链接
        var link = document.createElement("a");
        var link_text = document.createTextNode("source");
        link.appendChild(link_text);
        link.setAttribute("href",url);
        var superscript = document.createElement("sup");
        superscript.appendChild(link);
        // 追加
        elem.appendChild(superscript);
    }
  }

 三、显示“快速访问键清单”

       编写一个能够把文档里用到的所有快速访问键显示在页面里的函数。

在html文档的<body>标签开头添加以下代码：

<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="9">Contact</a></li>
</ul>

js代码如下：

function displayAccesskeys() 
{
  if (!document.getElementsByTagName || !document.createElement ||!document.createTextNode) return false;
  // 获取文档中所有的links
  var links = document.getElementsByTagName("a");
  // 创建一个存储access keys的数组
  var akeys = new Array();
  // 遍历links
  for (var i=0; i<links.length; i++) 
  {
    var current_link = links[i];
    //如果没有 accesskey属性,就跳到下一次循环
    if (!current_link.getAttribute("accesskey")) continue;
    //获取accesskey的value
    var key = current_link.getAttribute("accesskey");
    // 获取a的value
    var text = current_link.lastChild.nodeValue;
    // 把a的value和accesskey的value存入数组
    akeys[key] = text;
  }
  // 创建list
  var list = document.createElement("ul");
  // 遍历accesskey的value
  for (key in akeys) 
  {
    var text = akeys[key];
    // 创建要追加到list里的变量
    var str = key + ": "+text;
    // 创建list的内容
    var item = document.createElement("li");
    var item_text = document.createTextNode(str);
    item.appendChild(item_text);
    // 将list内容追加到list
    list.appendChild(item);
  }
  // 创建标题
  var header = document.createElement("h3");
  var header_text = document.createTextNode("Accesskeys");
  header.appendChild(header_text);
  // 将标题追加到body
  document.body.appendChild(header);
  // 将list追加到body
  document.body.appendChild(list);
}
addLoadEvent(displayAccesskeys);

小结：

需要对文档里的现有信息进行检索时，可用以下DOM方法：

getElementById()
getElementsByTagName()
getAttribute()

需要把信息添加到文档里时，可用以下DOM方法：

createElement()
createTextNode()
appendChild()
insertBefore()
setAttribute()