您的位置：首页 > Web前端 > JavaScript

JS DOM 编程艺术(第2版)读书笔记 第8章 充实文档的内容

2015-05-17 10:32 369 查看
为一个文档创建

① 缩略词表

② 文献来源链接

③ 快捷键清单

这些信息，对于我们来说很少用到，也可以说几乎用不到。通过这个三个函数的编写，巩固上几章节中学到的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
4000
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航