html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" media="screen" href="css/typography.css" /> </head> <body> <ul id="navigation"> <li><a href="keke.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> <h1>what is the document object model?</h1> <p> The<abbr title="World Wide Web Consortium">W3C</abbr>defines the <abbr title="Document Object Model">DOM</abbr> as: </p> <blockquote cite="http://www.w3.org/dom/"> <p> A platform- and language-neutral interface that will allow programs and script to dynamically access and update the content, struture and style of documents. </p> </blockquote> <p> 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="extensible Markup Language">XML</abbr>documents. </p> <script src="js/addLoadEvent.js"></script> <script src="js/displayAbbreviations.js"></script> <script src="js/displayCitation.js"></script> <script src="js/displayAccesskeys.js"></script> </body> </html>
css：
body{ font-family: 微软雅黑; font-size: 10px; } abbr{ text-decoration: none; border: 0px; font-style: normal; }
js：
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function displayAbbreviations() { if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; //获取所有缩略词 var abbreviations = document.getElementsByTagName("abbr"); if(abbreviations.length < 1) return false; //定义一个数组，以便以后存放缩略词和解释 var defs = new Array(); //遍历缩略词对象，获取缩略词和解释 for (i=0; i<abbreviations.length; i++){ var current_abbr = abbreviations[i]; if(current_abbr.childNodes.length < 1) continue; var definition = current_abbr.getAttribute("title"); var key = current_abbr.lastChild.nodeValue; //把缩略词和解释存入数组，缩略词key作为下标 defs[key] = definition; } //创建一个dl，以便以后放表格 var dlist = document.createElement("dl"); //遍历对象 for (key in defs){4 var definition = defs[key]; //创建标题，把缩略词添加到dt里面 var dtitle =document.createElement("dt"); var dtitle_text = document.createTextNode(key); dtitle.appendChild(dtitle_text); //创建描述，把解释添加到dd里面 var ddesc = document.createElement("dd"); var ddesc_text = document.createTextNode(definition); ddesc.appendChild(ddesc_text); //把dd dt添加到dl也就是dlist中 dlist.appendChild(dtitle); dlist.appendChild(ddesc); } if (dlist.childNodes.length < 1) return false; //创建一个h2标题 var header = document.createElement("h2"); var header_text = document.createTextNode("abbreviations"); header.appendChild(header_text); //把h2标题添加到页面 document.body.appendChild(header); //把dl添加到页面 document.body.appendChild(dlist); } addLoadEvent(displayAbbreviations); // document.body.appendChild(element)方法把元素添加到html文档最后 function displayAccesskeys() { if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; var links = document.getElementsByTagName("a"); var akeys = new Array(); for (var i=0; i<links.length; i++){ var current_link = links[i]; if (current_link.getAttribute("accesskey") == null) continue; var key = current_link.getAttribute("accesskey"); var text = current_link.lastChild.nodeValue; akeys[key] = text; } var list = document.createElement("ul"); for(key in akeys){ var text = akeys[key]; var str = key + ":" + text; var item =document.createElement("li"); var item_text = document.createTextNode(str); item.appendChild(item_text); list.appendChild(item); } var header =document.createElement("h3"); var header_text = document.createTextNode("Accesskeys"); header.appendChild(header_text); document.body.appendChild(header); document.body.appendChild(list); } addLoadEvent(displayAccesskeys); function displayCitations() { if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; //取得文档中所有引用 var quotes = document.getElementsByTagName("blockquote"); //遍历引用 for (var i = 0; i<quotes.length; i++){ //判断引用里面有没有cite属性 if(!quotes[i].getAttribute("cite")) continue; //把cite属性值保存到url var url = quotes[i].getAttribute("cite"); //取得引用中的所有元素节点 var quoteChildren = quotes[i].getElementsByTagName("*"); //判断引用中是否有元素节点 if (quoteChildren.length < 1) continue; //取得最后一个元素节点 var elem = quoteChildren[quoteChildren.length - 1]; //创建a标签，文本 var link = document.createElement("a"); var link_text = document.createTextNode("source"); link.appendChild(link_text); //给a标签设置href属性，属性值为前面保存的url link.setAttribute("href",url); //创建sup,并把link添加到sup中 var superscript = document.createElement("sup"); superscript.appendChild(link); //把sup添加到引用里面最后的元素节点上 elem.appendChild(superscript); } } addLoadEvent(displayCitations);