JavaScript学习系列6 充实文档的内容

JavaScript 两项基本原则

1. 渐进增强：你应该总是从最核心的部分，也就是从内容开始。应该根据内容使用标记实现良好的结构；然后再逐步加强这些内容。
2. 平稳退化：不支持JavaScript也能访问基本内容。

内容：我们在Html文件中编辑如下的内容

    



 

   

   

    

       

  

   

   

   

 

 

   

What is the Document Object Model?

   

          The W3C defines

          the DOM as:

   

   

     

          A platform- and language-neutral interface that will allow programs

          and scripts to dynamically access and update the

          content, structure and style of documents.

     

   

   

          It is an API

          that can be used to navigate

          HTML and XML

          documents.

   

 

：文档类型说明

编写displayAbbreviations函数：把标签中的title属性集中起来显示在一个页面。

function displayAbbreviations() {

//检查浏览器是否支持函数

       if (!document.getElementsByTagName || !document.createElement || !document.createTextNode)      return false;

       // 获取所有的缩略词

       var abbreviations = document.getElementsByTagName("abbr");

       if (abbreviations.length < 1)      return false;               //如果没有直接返回

       var defs = new Array();

       

       for (var i=0; i
       var current_abbr = abbreviations[i];

       if (current_abbr.childNodes.length < 1) continue;

       var definition = current_abbr.getAttribute("title");          //缩略语的解释文本

       var key = current_abbr.lastChild.nodeValue;

       defs[key] = definition;                                                //缩略语

       }

     // 创建列表

     var dlist = document.createElement("dl");



     for (key in defs) {

var definition = defs[key];

//创建标题

var dtitle = document.createElement("dt");

            var dtitle_text = document.createTextNode(key);

            dtitle.appendChild(dtitle_text);

            //  创建解释文字

            var ddesc = document.createElement("dd");

            var ddesc_text = document.createTextNode(definition);

            ddesc.appendChild(ddesc_text);

            // 以上加入的列表当中并进行循环

            dlist.appendChild(dtitle);

            dlist.appendChild(ddesc);

     }

  if (dlist.childNodes.length < 1) return false;

//创建标题，内容为Abbreviations

  var header = document.createElement("h2");

  var header_text = document.createTextNode("Abbreviations");

  header.appendChild(header_text);



  document.body.appendChild(header);

  document.body.appendChild(dlist);

}

显示“快捷键清单”

accesskey：属性可以把一个元素与键盘上的某个特定按键关联在一起。

Windows：快捷键的用法是同时按ALT键和特定键

Mac：同时按Ctrl和特定键

下面是accesskey的一个例子：

Home