【JavaScript DOM编程艺术】- 充实文档的内容_jsdom编程艺术的充实文档内容-CSDN博客

本文链接：https://blog.csdn.net/Mluka/article/details/73188710

本章内容是对上一章的再次应用和练习。
基本思路都是：用JavaScript函数先把文档结构里的一些现有信息提取出来，再把那些信息以一种清晰和有意义的方式重新插入到文档里去。

应用参考的HTML如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>8</title>
    <link rel="stylesheet" type="text/css" href="8.css">
</head>
<body>
<div class="body">
    <ul class="navigate">
        <li>
        <a href="#" accesskey="1">Home</a>
        </li>
        <li>
        <a href="#" accesskey="4">Search</a>
        </li>
        <li>
        <a href="#" accesskey="9">Contact</a>
        </li>
    </ul>
    <h1>What is the Document Object Model?</h1>
    <p>The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Model" >DOM</abbr> as:
    </p>
    <blockquote cite="http://www.w3.org/DOM/">
        <p>
        A platform- and language-neutral interface that will allow programs 
        and scripts to dynamically access and update the content, structure 
        and style of documents.
        </p>
    </blockquote>
    <p>
    It is an <abbr title="Application Programming Interface">API</abbr> that 
    can be used to navigate <abbr title="HyperText Markup Language">HTML</abbr> 
    and <abbr title="eXtensible Markup Language">XML</abbr> documents.
    </p>

    <script type="text/javascript" src="8.js"></script>
</div>
</body>
</html>

显示“缩略语列表”

即从< abbr >标签中提取title属性和文本。
以键值对的形式制作成列表。
具体步骤如下：

遍历这份文档中的所有abbr元素
保存每个abbr元素的title属性
保存每个abbr元素包含的文本
创建一个“定义列表”元素（即dl元素）
遍历刚才保存的title属性和abbr元素的文本
创建一个“定义标题”元素（即dt元素）
把abbr元素的文本插入到这个dt元素
创建一个“定义描述”元素（即dd元素）
把title属性插入到这个dd元素
把dt元素追加到第4步创建的dl元素上
把dd元素追加到第4步创建的dl元素上
把dl元素追加到文档的body元素上

对应代码：

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_i = abbreviations[i];
        var definition = current_i.getAttribute("title");
        var key = current_i.firstChild.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);
        var ddesc = document.createElement("dd");
        var ddesc_text = document.createTextNode(definition);
        dtitle.appendChild(dtitle_text);
        ddesc.appendChild(ddesc_text);
        dlist.appendChild(dtitle);
        dlist.appendChild(ddesc);
    }
    var header = document.createElement("h2");
    var header_text = document.createTextNode("Abbreviations");
    header.appendChild(header_text);
    document.body.appendChild(header);
    document.body.appendChild(dlist);
}

在上面的代码中我们用到了for-in语句。它是一种精准的迭代语句，可以用来枚举对象的属性。
语法如下：for (property in expression) statement

显示“文献来源链接表”

function displayCitations(){
    if(!document.getElementsByTagName || !document.createTextNode || !document.createElement){
        return false;
    }
    var quotes = document.getElementsByTagName("blockquote");
    var anchor_text = document.createTextNode("source");
    for(var i=0; i<quotes.length; i++){
        if(!quotes[i].getAttribute("cite"))continue;
        var links = quotes[i].getAttribute("cite");
        var quoteElem = quotes[i].getElementsByTagName("*");
        if(quoteElem.length<1)continue;
        var anchor = document.createElement("a");
        anchor.appendChild(anchor_text);
        anchor.setAttribute("href",links);
        anchor.setAttribute("target", "_blank");
        var sup = document.createElement("sup");
        sup.appendChild(anchor);
        var elem = quoteElem[quoteElem.length - 1];
        elem.appendChild(sup);
    }
}

显示“快捷键清单”

function displayAccesskeys(){
    if(!document.getElementsByTagName){
        return false;
    }
    var links = document.getElementsByTagName("a");
    var akeys = new Array();
    for(var i=0; i<links.length; i++){
        if(!links[i].getAttribute("accesskey"))continue;
        var accesskey = links[i].getAttribute("accesskey");
        if(links[i].firstChild.nodeType == 3){
            var text = links[i].firstChild.nodeValue;
            akeys[accesskey] = text;
        }
    }
    var list = document.createElement("ul");
    for(key in akeys){
        var text = akeys[key];
        var str = key + " : " + text;
        var item = document.createElement("li");
        var item_text = document.createTextNode(str);
        item.appendChild(item_text);
        list.appendChild(item);
    }
    var header = document.createElement("h2");
    var header_text = document.createTextNode("Accesskey");
    header.appendChild(header_text);
    document.body.appendChild(header);
    document.body.appendChild(list);
}