JS DOM 编程艺术(第2版)读书笔记第8章充实文档的内容_javascript dom编程艺术第八章-CSDN博客

为一个文档创建

① 缩略词表
② 文献来源链接
③ 快捷键清单

这些信息，对于我们来说很少用到，也可以说几乎用不到。通过这个三个函数的编写，巩固上几章节中学到的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>