札早早

导航

显示“快捷键清单” 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>

 

posted on 2017-05-08 11:15  札早早  阅读(130)  评论(0编辑  收藏  举报