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

本章目的

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

 

具体步骤

我们可以分三步完成：

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

具体js代码如下：

 1 // JavaScript Document
 2 function displayAbbreviations(){
 3     if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
 4     //取得所有缩略词
 5     var abbreviations=document.getElementsByTagName("abbr");
 6     if(abbreviations.length<1) return false;
 7     var defs=new Array();
 8     //遍历这些缩略词
 9     for(var i=0;i){
10         var current_abbr=abbreviations[i];
11         if(current_abbr.childNodes.length<1)continue;
12         var definition=current_abbr.getAttribute("title");
13         var key=current_abbr.lastChild.nodeValue;
14         defs[key]=definition;
15     }
16     //创建定义列表
17     var dlist=document.createElement("dl");
18     for(key in defs){
19         var definiton = defs[key];
20         var dtitle=document.createElement("dt");
21         var dtitle_text=document.createTextNode(key);
22         dtitle.appendChild(dtitle_text);
23         var ddesc=document.createElement("dd");
24         var ddesc_text=document.createTextNode(definition);
25         ddesc.appendChild(ddesc_text);
26         dlist.appendChild(dtitle);
27         dlist.appendChild(ddesc);
28     }
29     if(dlist.childNodes.length<1) return false;
30     var header=document.createElement("h2");
31     var header_text=document.createTextNode("Abbreviations");
32     header.appendChild(header_text);
33     document.body.appendChild(header);
34     document.body.appendChild(dlist);
35 }
36 
37 //函数在页面加载时被调用
38 addLoadEvent(displayAbbreviations);

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

总结

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

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

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

转载于:https://www.cnblogs.com/lijie33402/p/4422362.html