JavaScript DOM编程艺术之第8章——充实文档的内容相关

本文链接：https://blog.csdn.net/liaoai/article/details/120515539

本文档展示了一个HTML页面，其中包含了缩略语、引用来源和快捷键的处理。通过DOM操作，实现了缩略语的显示为定义列表，引用来源链接的添加以及快捷键清单的展示。此外，还定义了一个通用的`addLoadEvent`函数来确保在页面加载完成后执行这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- HTML相关代码

HTML相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>forth</title>
</head>
<body>
    <h1> What is the Document Object Model?</h1>
    <p>
        thie <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>
    <ul>
        <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>
    <script src="scripts/displayAbbreviations.js"></script>
    <script src="scripts/addLoadEvent.js"></script>
</body>
</html>

1.显示“缩略语列表”

希望得到如下定义列表

<dl>
    <dt>W3C</dt>
    <dd>World Wide Web Consortium</dd>
    <dt>DOM</dt>
    <dd>Document Object Model</dd>
    <dt>API</dt>
    <dd>Application Programming Interface</dd>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>XML</dt>
    <dd>Extensible Markup Language</dd>
</dl>

使用DOM创建

//用一个定义列表元素显示<abbr>标签包含文本和title属性
function displayAbbreviations(){
    if(!document.getElementsByTagName || !document.createTextNode || !document.createElement) 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++){
        //获取缩略词的title
        var definition = abbreviations[i].getAttribute("title");
        //获取缩略词的文本
        var key = abbreviations[i].lastChild.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);
        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);
    }
    //创建标题
    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);

2.显示”文献来源链接表“

显示blockquote元素中cite属性

function dispalyCitations(){
    var quotes = document.getElementsByTagName("blockquote");
    for(var i=0; i<quotes.length; i++){
        if(!quotes[i].getAttribute("cite")) continue;
        var url = quotes[i].getAttribute("cite");
        //若使用lastChild属性不一定返回p元素节点，有可能将换行符解释为一个文本节点。
        //找出所有元素节点
        var quoteChildren = quotes[i].getElementsByTagName("*");
        if(quoteChildren.length < 1) continue;
        var elem = quoteChildren[quoteChildren.length - 1];
        //创建链接
        var link = document.createElement("a");
        //链接文本
        var link_text = document.createTextNode("source");
        link.appendChild(link_text);
        //给链接增加属性
        link.setAttribute("href",url);
    	//插入链接
        var superscript = document.createElement("sup");
        superscript.appendChild(link);
        elem.appendChild(superscript);
    } 
}
addLoadEvent(dispalyCitations);

3.显示”快捷键清单“

function displayAccesskeys(){
    var links = document.getElementsByTagName("a");
    var akeys = new Array();
    for(var i=0; i<links.length; i++){
        var current_link = links[i];
        if(!current_link.getAttribute("accesskey")) continue;
        var key = current_link.getAttribute("accesskey");
        var text = current_link.lastChild.nodeValue;
        akeys[key] = 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("h3");
    var header_text = document.createTextNode("Accesskeys");
    header.appendChild(header_text);
    document.body.appendChild(header);
    document.body.appendChild(list);
}
addLoadEvent(displayAccesskeys);

4.addLoadEvent

function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;
    }else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}