【Javascript DOM读书笔记】chapter8 充实文档内容

本章目的

作者举出了第一个实例，为一篇 web 页面动态创建缩略语（abbreviation）的列表。大家知道，我们可以使用 <abbr>...</abbr> 来指示一个缩略语，如 <abbr title="Document Object Model">DOM</abbr>，其中 title 属性指明了缩略语的全称。我们所要做的就是，找出文章中所有的 <abbr> 及其对应的 title，汇总，然后在文档的末尾把缩略语对照表显示出来。最终效果应该如下：

具体步骤

我们可以分三步完成：

• 遍历文档获取信息
• 创建标签包装信息
• 插入标签到 WEB 文档

具体js代码如下：

 // JavaScript Document

 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<abbreviations.length;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 definiton = 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;

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

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

     header.appendChild(header_text);

     document.body.appendChild(header);

     document.body.appendChild(dlist);

 }

 //函数在页面加载时被调用

 addLoadEvent(displayAbbreviations);

在这里着重强调18行的for（variable  in  array）   遍历数组的所有元素！！

总结

（1）使用正确的标签构建页面是使用 JS 提升页面内容的前提

（2）使用 JS 提升页面内容比直接在页面中添加标签，更加灵活、高效、自动、易于修改。

（3）可以使用本章介绍的技术区编写一些脚本，提取文档标题放在开头作为可以到达有关标题的内部链接（可以参考网上资料来完成）