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