<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>explaining</title> </head> <body> <ul id='navigation'> <li><a href="index.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 scripts to dynamically access and update the content,structure the style of document.</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> addLoadEvent(displayAccesskeys); function displayAccesskeys(){ var akeys=new Array(); var nav=document.getElementById('navigation'); var link=nav.getElementsByTagName('a'); for(var i=0;i<link.length;i++){ var current_link=link[i]; var key=current_link.getAttribute('accesskey'); var text=current_link.firstChild.nodeValue; akeys[key]=text; } var list=document.createElement('ul'); for(var key in akeys){ var text=akeys[key]; var item=document.createElement('li'); var item_text=document.createTextNode(key+': '+text); 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); } function addLoadEvent(func){ var oldEvent = window.onload; if( typeof window.onload != 'function'){ window.onload=func; }else{ window.onload=function(){ oldEvent(); func(); } } } </script> </body> </html>
思路：先提取出信息保存到数组后，再把那些信息以一种清晰和有意义的方式重新插入到文档里去。