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