<!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>

显示“快捷键清单” acessksy的更多相关文章

  1. 有用的 Bash 快捷键清单

    作者: Sk 译者: LCTT Sun Yongfei 现如今,我在终端上花的时间更多,尝试在命令行完成比在图形界面更多的工作.随着时间推移,我学了许多 BASH 的技巧.这是一份每个 Linux 用 ...

  2. 不显示BOM清单的版本

    应用 Oracle Bill Of   Materiel 层 Level Function 函数名 Funcgtion Name BOM_BOMFDBOM 表单名 Form Name BOMFDBOM ...

  3. Sublime text3最全快捷键清单

    [转]https://blog.csdn.net/mrchengzp/article/details/78508509,感谢作者的分享,收录方便查阅   Sublime Text 支持多种编程语言的语 ...

  4. Eclipse 常用快捷键清单

    罗列了一些常用的快捷键(显红为很实用的快捷键) Ctrl+Shift+L:快速打开所有快捷键列表 一.文件 F2 :快速打开信息提示.重命名F3 :打开声明(同Ctrl+左鼠)F4 :打开类型层次结构 ...

  5. vscode分栏显示快捷键

    vscode没有默认的分栏快捷键,我们可以自定义,步骤如下: 1.Crtl + k,再Ctrl + s,调出快捷键设置面板 2.在搜索栏输入"视图:",在未定义快捷键的区域找到&q ...

  6. 【Idea】实用的快捷键清单

    1.Ctrl + Shift +i:快速查看某个类/方法 2.Ctrl +:(Ace Jump插件启动) 3.alt+F1:快速查看某个类/方法 所在的包 4.Ctrl +w :选中某个单词 5.Ct ...

  7. 【JavaScript DOM编程艺术(第二版)】笔记

    第1章 javascript简史 1.什么是DOM? 简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.\         第2章 javascript语法 1.内建对象: 内建在javasc ...

  8. 《JavaScript Dom 编程艺术》读书笔记-第8章

    充实文档的内容,包括几个方面: 一个为文档创建“缩略图列表”的函数: 一个为文档创建“文献来源链接”的函数: 一个为文档创建“快捷键清单”的函数. <abbr>在HTML5 中以取代< ...

  9. JavaScript DOM编程艺术 读书笔记

    2. JavaScript语法 2.1 注释      HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...

随机推荐

  1. U盘安装Windows Server 2008 r2失败，改用磁盘安装

    一.使用UltraISO制作系统安装启动U盘提示错误“缺少所需的CD/DVD驱动器设备驱动程序.…………”试了各种方法都不能通过U盘进行安装. 二.直接使用磁盘安装0.使用PE先将磁盘格式化.分区.1 ...

  2. ajax return 的问题

    平时都是在AJAX里执行逻辑,实然想到能不能return返回数据呢? ajax 是异步请求,return拿值得时候 ajax并没有取到值,所以是undefind. 需要把ajax的请求方式改为同步 v ...

  3. .net基本面试题

    OOP: Object Oriented Programming: 面向对象编程技术的关键性观念是它将数据及对数据的操作行为放在一起,作为一个相互依存.不可分割的整体——对象.对于相同类型的对象进行分 ...

  4. Beaglenone读取编码器数据

    一般情况下,beaglebone black默认启动两个cape: 1.BB-BONE-EMMC-2G 2.BB-BONELT-HDMI 我们可以通过编辑uEnv.txt的文件来决定是否启动HDMI, ...

  5. Redis学习-string数据类型

    Redis 是一个开源的使用 ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志 型.Key-Value 数据库. redis提供五种数据类型string,hash,list,set及sor ...

  6. 用ab的post方式进行测试

    一.Ab是常用的性能测试工具,因为它支持windows…… 通常使用的命令是ab –c –n –k -r,分别表示:模拟终端数.发送包数.请求是否带keepalive.忽略错误,默认都是以GET方式去 ...

  7. Python 协程并发爬虫网页

    简单爬虫实例: 功能:通过urllib.request实现网站爬虫,捕获网站内容. from urllib import request def f(url): print("GET:%s& ...

  8. 【题解】Luogu P3931 SAC E#1 - 一道难题 Tree

    原题传送门 题目几乎告诉你要用最大流 先进行搜索,将树的叶子节点都连到一个虚拟点T上,流量为inf(这样不会干扰到前面部分的最大流) 其他边按树的形态连边,以根节点为S,跑一变最大流即可求出答案 #i ...

  9. Java字节码浅析（二）

    英文原文链接,译文链接,原文作者:James Bloom,译者:有孚 条件语句 像if-else, switch这样的流程控制的条件语句,是通过用一条指令来进行两个值的比较,然后根据结果跳转到另一条字 ...

  10. 论文笔记：Improving Deep Visual Representation for Person Re-identification by Global and Local Image-language Association

    Improving Deep Visual Representation for Person Re-identification by Global and Local Image-language ...