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

来源：互联网发布：周琦体测数据编辑：程序博客网时间：2024/06/14 23:22

本章内容是对上一章的再次应用和练习。
基本思路都是：用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);}

最终效果：
这里写图片描述
这三个练习重点锻炼了我们在使用DOM时的思维方式以及对不同类型元素的相互连接。

阅读全文

0 0