1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <script>
9 //思路代码实现
10 function displayAccesskey(){
11 if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) returen false;
12 //取得文档中所有链接
13 var links = document.getElementsByTagName('a');
14 //创建一个数组，保存访问键
15 var akeys = new Array();
16 //遍历链接
17 for(var i=0;i<links.length;i++){
18 var current_link = links[i];
19 if(!current_link.getAttribute('accesskey') continue;
20 //取得accesskey值
21 var key = current_link.getAttribute('accesskey');
22 //取得链接本文
23 var text = current_link.lastChild.nodeValue;
24 //添加到数组
25 akeys[key] = text;
26 }
27
28 //创建列表
29 var list = document.createElement('ul');
30 for(key in akeys){
31
32 var text = akeys[key];
33 //创建放到列表项中的字符串
34 var str = key+":"+text;
35 //创建列表项
36 var item = document.createElement('li');
37 var item_text = document.createTextNode(str);
38 item.appendChild(item_text);
39 //把列表项添加到列表中
40 list.appendChild(item);
41 }
42
43 //创建标题
44 var header = document.createElement('h3');
45 var header_text = document.createTextNode('accesskeys');
46 header.appendChild(header_text);
47 //把标题添加到页面主体
48 document.body.appendChild(header);
49 //把列表添加到页面主体
50 document.body.appendChild(list);
51
52 }
53 </script>
54 <a href="index.html" accesskey="1">HOME</a>
55 <p>快捷键网站：www.clagnut.com/blog/193/</p>
56 <p> accesskey='1' 返回本网站主页
57 accesskey='2' 后退到前一个页面
58 accesskey='4' 打开本网站的搜索表单/页面
59 accesskey='9' 本网站联系方法
60 accesskey='0' 查看本网站的快捷键清单
61 </p>
62 <ul>
63 <li><a href="index.html" accesskey="1">home</a></li>
64 <li><a href="search.html" accesskey="4">search</a></li>
65 <li><a href="Contact.html" accesskey="9">Contact</a></li>
66 </ul>
67
68 注：利用DOM技术 动态创建一份快捷键清单 （思路）
69
70 1，把文档里所有链接全部提取打一个节点集合里面
71 2，遍历这个节点集合里面的所有链接
72 3，如果某个链接带有acesskey属性，就把它的值保存起来
73 4，把这个链接在浏览器窗口里的屏显标识文字也保存起来
74 5，创建一个清单
75 6，为拥有快捷键的各个链接分别创建一个列表项 li元素
76 7，把列表项添加到 ‘快捷键清单’。
77 8，把 ’快捷键清单‘添加到文档里
78
79 </body>
80 </html>
