Javascript Dom编程艺术读书笔记（四）-CSDN博客

本文链接：https://blog.csdn.net/eye_water/article/details/78069454

充实文档内容
虽然能利用脚本动态创建标签，但是核心内容仍应该放到HTML文件中而不是利用脚本动态创建。当然，可以利用脚本在某些细节方面充实文档内容（内容最好不为核心内容）。

<!DOCTYPE html>
<html lang="len">
    <head>
        <meta charset="utf-8">
        <title>Explaning the Document Object Model</title>
    </head>
    <body>
        <h1>What's the Document Object Model?</h1>
        <h2>
            The <abbr title="World Wide Web Consortium">W3C</abbr>defines the <abbr title="Document Object Model">DOM</abbr> as:
        </h2>
        <blockquote cite="http://www.w3.org/DOM/">
            <h2>
                A plantform- and language-netural interface that will allow programs
                and scripts to dynamically access and update the
                content, structure and style of documents.
            </h2>
        </blockquote>
        <h2>
            It is an <attr title="Application Programming Interface">API</abbr>
            that can be userd to navigate <abbr title="HyperText Markup Language">
            HTML</abbr> and <abbr title="eXtensible Markup Language">XML
            </abbr> documents.
        </h2>
    </body>
</html>

如果像上面那样编写HTML文件，那么用浏览器打开后会是这样：
这里写图片描述
可以看到在缩略语下面会有虚线，只有当鼠标放在缩略语上才会显示完整的词汇。可以用脚本把完整的词汇和缩略语放在文档内容中，但是在文档内容中既然有了完整的词汇和缩略语那么就不需要虚线了，可以先利用CSS把虚线去掉：

body {
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 10pt;
}
abbr{
    text-decoration: none;
    border: 0;
    font-style: normal;
}

再来编写脚本（利用dl标签把缩略语和完整语句动态放入到文档内容中）：

function showAbbreviations() {
    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_link = abbreviations[i];
        /*如果当前节点的子节点值错误（老版IE在统计<abbr>标签的子节点时会返回一个错误值'0')那么就跳过这一轮循环进行下一轮*/
        if(current_link.childNodes.length < 1) continue;
        var define = current_link.getAttribute("title");
        var key = current_link.firstChild.nodeValue;
        defs[key] = define;
        /*缩略语为下标，完整语句为值*/
    }
    var dlist = document.createElement("dl");
    for(key in defs) {
        var define = defs[key];
        var dttittle = document.createElement("dt");
        var dttittle_text = document.createTextNode(key);
        dttittle.appendChild(dttittle_text);
        var ddtittle = document.createElement("dd");
        var ddtittle_text = document.createTextNode(define);
        ddtittle.appendChild(ddtittle_text);
        dlist.appendChild(dttittle);
        dlist.appendChild(ddtittle);
    }
    if(dlist.childNodes.length < 1) return false;
    var header = document.createElement("h3");
    var header_text = document.createTextNode("Abbreviation");
    header.appendChild(header_text);
    document.body.appendChild(header);
    document.body.appendChild(dlist);
}
addLoadEvent(showAbbreviations);

页面显示效果：
这里写图片描述
还没有完，注意一下<blockquote>里面利用cite属性存放了一个网页链接。但是在网页里并不能找到这个链接，这时候可以利用脚本把链接填充到文档内容里：

function showhrefs() {
    if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    var target = document.getElementsByTagName("blockquote");
    for(var i=0; i<target.length; i++){
        var url = target[i].getAttribute("cite");
        /*查找blockquote的所有子节点*/
        var quotechildren = target[i].getElementsByTagName('*');
        var elem = quotechildren[quotechildren.length - 1];
        if(elem.childNodes.length < 1) continue;
        var link = document.createElement("a");
        var link_text = document.createTextNode("source");
        link.appendChild(link_text);
        link.setAttribute("href", url);
        var superscripts = document.createElement("sup");
        superscripts.appendChild(link);
        elem.appendChild(superscripts);
    }
}
addLoadEvent(showhrefs);