DOM Scripting 学习七-explanation

Darcyyyy

已于 2022-08-01 14:26:56 修改

阅读量65

点赞数

分类专栏：前端文章标签：前端 html javascript

于 2022-08-01 10:32:09 首次发布

本文链接：https://blog.csdn.net/Darcyyyy/article/details/126096154

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

explanation

explanation.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text.html; charset=utf-8" />
    <title>Explaining the Document Object Model</title>
    <link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" />
    <script type="text/javascript" src="scripts/addLoadEvent.js"></script>
    <script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
    <script type="text/javascript" src="scripts/displayCitations.js"></script>
    <script type="text/javascript" src="scripts/displayAccesskeys.js"></script>
</head>

<body>
    <ul id="navigation">
        <li><a href="index.html" accesskey="1">Home</a></li>
        <li><a href="search.html" accesskey="4">Search</a></li>
        <li><a href="contact.html" accesskey="9">Contact</a></li>
    </ul>
    <h1>What is the Document Objec 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>
</body>

</html>

scripts/addLoadEvent.js

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

scripts/displayAbbreviations.js

function displayAbbreviations() {
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    //get all the abbreviations
    var abbreviations = document.getElementsByTagName("abbr");
    if (abbreviations.length < 1) return false;
    var defs = new Array();
    //loop through the abbreviations
    for (var i = 0; i < abbreviations.length; i++) {
        var current_abbr = abbreviations[i];
        var definition = current_abbr.getAttribute("title");
        var key = current_abbr.lastChild.nodeValue;
        defs[key] = definition;
    }
    //create the definition list
    var dlist = document.createElement("dl");
    //loop through the definitions
    for (key in defs) {
        var definition = defs[key];
        //create the definition title
        var dtitle = document.createElement("dt");
        var dtitle_text = document.createTextNode(key);
        dtitle.appendChild(dtitle_text);
        //create the definition decription
        var ddesc = document.createElement("dd");
        var ddesc_text = document.createTextNode(definition);
        ddesc.appendChild(ddesc_text);
        //add them to the definition list
        dlist.appendChild(dtitle);
        dlist.appendChild(ddesc);
    }
    //create a headline
    var header = document.createElement("h2");
    var header_text = document.createTextNode("Abbreviations");
    header.appendChild(header_text);
    //add the headline to the body
    document.body.appendChild(header);
    //add the definition list to the body
    document.body.appendChild(dlist);
}

addLoadEvent(displayAbbreviations);

scripts/displayCitations.js

function displayCitations() {
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    // get all the blockquotes
    var quotes = document.getElementsByTagName("blockquote");
    // loop through all the blockquotes
    for (var i = 0; i < quotes.length; i++) {
        // if there is no cite attribute, continue the loop
        if (!quotes[i].getAttribute("cite")) continue;
        // store the cite attribute
        var url = quotes[i].getAttribute("cite");
        // get all the element nodes in the blockquote
        var quoteChildren = quotes[i].getElementsByTagName('*');
        // if there are no element node, continue the loop
        if (quoteChildren.length < 1) continue;
        // get the last element node in the blockquote
        var elem = quoteChildren[quoteChildren.length - 1];
        // create the markup
        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);
        // add the markup to the last element node in the blockquote
        elem.appendChild(superscript);
    }
}

addLoadEvent(displayCitations);

scripts/displayAccesskeys.js

function displayAccesskeys() {
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    // get all the links in the document
    var links = document.getElementsByTagName("a");
    // create an array to store the access keys
    var akeys = new Array();
    // loop through the links
    for (var i = 0; i < links.length; i++) {
        var current_link = links[i];
        // if there is no accesskey attribute, continue the loop
        if (!current_link.getAttribute("accesskey")) continue;
        // get the value of the accesskey
        var key = current_link.getAttribute("accesskey");
        // get the value of the link text
        var text = current_link.lastChild.nodeValue;
        // add them to the array
        akeys[key] = text;
    }
    // create the list
    var list = document.createElement("ul");
    // loop through the access keys
    for (key in akeys) {
        var text = akeys[key];
        // create the string to put in the list item
        var str = key + ": " + text;
        // create the list item
        var item = document.createElement("li");
        var item_text = document.createTextNode(str);
        item.appendChild(item_text);
        // add the list item to the list
        list.appendChild(item);
    }
    // create a headline
    var header = document.createElement("h3");
    var header_text = document.createTextNode("Accesskeys");
    header.appendChild(header_text);
    // add the headline to the body
    document.body.appendChild(header);
    // add the list to the body
    document.body.appendChild(list);
}
addLoadEvent(displayAccesskeys);

styles/typography.css

body {
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 10pt;
}

abbr {
    text-decoration: none;
    border: 0;
    font-style: normal;
}