显示“快捷键清单” acessksy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //思路代码实现 function displayAccesskey(){ if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) returen 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') continue; //取得accesskey值 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); } </script> <a href="index.html" accesskey="1">HOME</a> <p>快捷键网站:www.clagnut.com/blog/193/</p> <p> accesskey='1' 返回本网站主页 accesskey='2' 后退到前一个页面 accesskey='4' 打开本网站的搜索表单/页面 accesskey='9' 本网站联系方法 accesskey='0' 查看本网站的快捷键清单 </p> <ul> <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> 注:利用DOM技术 动态创建一份快捷键清单 (思路) 1,把文档里所有链接全部提取打一个节点集合里面 2,遍历这个节点集合里面的所有链接 3,如果某个链接带有acesskey属性,就把它的值保存起来 4,把这个链接在浏览器窗口里的屏显标识文字也保存起来 5,创建一个清单 6,为拥有快捷键的各个链接分别创建一个列表项 li元素 7,把列表项添加到 ‘快捷键清单’。 8,把 ’快捷键清单‘添加到文档里 </body> </html>