JS DOM 编程艺术(第2版)读书笔记 第8章 充实文档的内容
为一个文档创建
① 缩略词表
② 文献来源链接
③ 快捷键清单
这些信息，对于我们来说很少用到，也可以说几乎用不到。通过这个三个函数的编写，巩固上几章节中学到的JS DOM打操作方法。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>充实文档的内容</title>
6 <style type="text/css">
7 body{font-family:"arial";font-size:14px;line-height:24px;}
8 abbr{text-decoration:none;border:none;font-style:normal;}
9 dt{font-weight:bold;}
10 </style>
11 </head>
12 <body>
13 <ul id="nav">
14 <li><a href="index.html" accesskey="1">Home</a></li>
15 <li><a href="search.html" accesskey="4">Search</a></li>
16 <li><a href="contact.html" accesskey="9">Contact</a></li>
17 </ul>
18 <h1>What is the Document Object Model?</h1>
19 <p>
20 The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Model">DOM</abbr> as
21 </p>
22 <blockquote cite="http://www.w3.org/DOM/">
23 <p>
24 A platform- end language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.
25 </p>
26 </blockquote>
27 <p>
28 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="eXtenside Markup language">XML</abbr> documents.
29 </p>
30 <script type="text/javascript">
31 /**
32 * 缩略词表
33 * <dl>
34 * <dt>W3C</dt>
35 * <dd>World wide Web Consortium</dd>
36 * </dl>
37 */
38 function displayAbbr() {
39 // 函数检测
40 if(!document.getElementsByTagName || !document.createElement || !document.createTextNode)
41 return false;
42 // 取缩略词
43 var abbr = document.getElementsByTagName("abbr");
44 if(abbr.length < 1) return false;
45 // 遍历缩略词和描述存入数组
46 var defs = [];
47 for (var i = 0; i < abbr.length; i++) {
48 var currentAbbr = abbr[i];
49 //if(abbr[i].childNodes.length < 1) continue; // ie浏览器 abbr 总是反回为0 经验证 在IE7 以上的版本无发现作者说的这个问题 故把本句代码注释掉了
50 var definition = currentAbbr.getAttribute("title");
51 var key = currentAbbr.lastChild.nodeValue;
52 defs[key] = definition;
53 }
54 // 创建缩略词列表
55 var dList = document.createElement("dl");
56 for (key in defs) {
57 var definition = defs[key];
58 var dTitle = document.createElement("dt");
59 var dTitleTxt = document.createTextNode(key);
60 var dDesc = document.createElement("dd");
61 var dDescTxt = document.createTextNode(definition);
62 dTitle.appendChild(dTitleTxt);
63 dDesc.appendChild(dDescTxt);
64 dList.appendChild(dTitle);
65 dList.appendChild(dDesc);
66 }
67 var header = document.createElement("h2");
68 var headerTxt = document.createTextNode("Abbreviations");
69 header.appendChild(headerTxt);
70 document.body.appendChild(header);
71 document.body.appendChild(dList);
72 }
73
74 addLoadEvent(displayAbbr);
75
76 /**
77 * 文献来源链接表
78 * <blockquote cite="http://www.w3.org/DOM/">
79 * ……
80 * </blockquote>
81 */
82 function displayCite() {
83 var quotes = document.getElementsByTagName("blockquote");
84 for (var i = 0; i < queotes.length; i++) {
85 if(!quotes[i].getAttribute("cite")) continue;
86 var ul = quotes[i].getAttribute("cite");
87 var quoteChildren = quotes[i].getElementsByTagName("*");
88 if(quoteChildren.length > 1) continue;
89 var elem = qu
90 }
91 }
92
93 /**
94 * 快捷键清单
95 *
96 *
97 */
98 function displayAccesskeys() {
99 if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
100 var links = document.getElementsByTagName("a");
101 var akeys = [];
102 for (var i = 0; i < links.length; i++) {
103 var current = links[i];
104 if (!current.getAttribute("accesskey")) continue;
105 var key = current.getAttribute("accesskey");
106 var text = current.lastChild.nodeValue;
107 akeys[key] = text;
108 }
109 var list = document.createElement("ul");
110 for(key in akeys){
111 var text = akeys[key];
112 var str = key + "：" + text;
113 var item = document.createElement("li");
114 var item_txt = document.createTextNode(str);
115 item.appendChild(item_txt);
116 list.appendChild(item);
117 }
118 var header = document.createElement("h3");
119 var header_txt = document.createTextNode("Accesskeys");
120 header.appendChild(header_txt);
121 document.body.appendChild(header);
122 document.body.appendChild(list);
123 }
124
125 addLoadEvent(displayAccesskeys);
126
127 // onload 事件
128 function addLoadEvent(func) {
129 var oldonload = window.onload;
130 if(typeof oldonload != "function"){
131 window.onload = func;
132 }else{
133 window.onload = function(){
134 oldonload();
135 func();
136 }
137 }
138 }
139 </script>
140 </body>
141 </html>
