本章内容
一、一个为文档创建“缩略词语表”的函数
二、一个为文档创建“文献来源链接”的函数
三、一个为文档创建“快速访问键清单”的函数
利用DOM动态的收集和创建一些有用的辅助信息，并把它们呈现在网页上的基本思路：
1、把隐藏在属性里的信息检索出来（遍历、提取）
2、把这些信息动态的创建为一些html内容（创建元素节点、将内容插入元素节点）
3、把这些html内容插入到文档里（追加）
一、一个为文档创建“缩略词语表”的函数
Html代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 5 <title>Explaining the Document Object Model</title> 6 </head> 7 <body> 8 <h1>What is the Document Object Model?</h1> 9 <p> 10 The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Model">DOM</abbr> as: 11 </p> 12 <blockquote cite="http://www.w3.org/DOM/"> 13 <p> 14 A platform- and language-neutral interface that will allow programsand scripts to dynamically access and update thecontent, structure and style of documents. 15 </p> 16 </blockquote> 17 <p> 18 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. 20 </p> 21 </body> 22 </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()