为一个文档创建
① 缩略词表
② 文献来源链接
③ 快捷键清单
这些信息,对于我们来说很少用到,也可以说几乎用不到。通过这个三个函数的编写,巩固上几章节中学到的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>