王雨的JavaScript練習02---複習DOM，充實文檔內容

時間 2019-12-07

標籤 javascript 練習複習 dom 充實文檔內容欄目 JavaScript 简体版

原文原文鏈接

html：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" media="screen" href="css/typography.css" />
</head>
<body>
<ul id="navigation">
    <li><a href="keke.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 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 script to dynamically access and update the content, struture 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 src="js/addLoadEvent.js"></script>
<script src="js/displayAbbreviations.js"></script>
<script src="js/displayCitation.js"></script>
<script src="js/displayAccesskeys.js"></script>
</body>
</html>

css：html

body{
    font-family: 微軟雅黑;
    font-size: 10px;
}
abbr{
    text-decoration: none;
    border: 0px;
    font-style: normal;
}

js：node

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

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 (i=0; i<abbreviations.length; i++){
        var current_abbr = abbreviations[i];
        if(current_abbr.childNodes.length < 1) continue;
        var definition = current_abbr.getAttribute("title");
        var key = current_abbr.lastChild.nodeValue;
        //把縮略詞和解釋存入數組，縮略詞key做爲下標
        defs[key] = definition;
    }
    //建立一個dl，以便之後放表格
    var dlist = document.createElement("dl");
    //遍歷對象
    for (key in defs){4
        var definition = defs[key];
        //建立標題，把縮略詞添加到dt裏面
        var dtitle =document.createElement("dt");
        var dtitle_text = document.createTextNode(key);
        dtitle.appendChild(dtitle_text);
        //建立描述，把解釋添加到dd裏面
        var ddesc = document.createElement("dd");
        var ddesc_text = document.createTextNode(definition);
        ddesc.appendChild(ddesc_text);
        //把dd dt添加到dl也就是dlist中
        dlist.appendChild(dtitle);
        dlist.appendChild(ddesc);
    }
    if (dlist.childNodes.length < 1) return false;
    //建立一個h2標題
    var header = document.createElement("h2");
    var header_text = document.createTextNode("abbreviations");
    header.appendChild(header_text);
    //把h2標題添加到頁面
    document.body.appendChild(header);
    //把dl添加到頁面
    document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);

// document.body.appendChild(element)方法把元素添加到html文檔最後

function displayAccesskeys() {
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    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") == null) 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);

function displayCitations() {
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    //取得文檔中全部引用
    var quotes = document.getElementsByTagName("blockquote");
    //遍歷引用
    for (var i = 0; i<quotes.length; i++){
        //判斷引用裏面有沒有cite屬性
        if(!quotes[i].getAttribute("cite")) continue;
        //把cite屬性值保存到url
        var url = quotes[i].getAttribute("cite");
        //取得引用中的全部元素節點
        var quoteChildren = quotes[i].getElementsByTagName("*");
        //判斷引用中是否有元素節點
        if (quoteChildren.length < 1) continue;
        //取得最後一個元素節點
        var elem = quoteChildren[quoteChildren.length - 1];
        //建立a標籤，文本
        var link = document.createElement("a");
        var link_text = document.createTextNode("source");
        link.appendChild(link_text);
        //給a標籤設置href屬性，屬性值爲前面保存的url
        link.setAttribute("href",url);
        //建立sup,並把link添加到sup中
        var superscript = document.createElement("sup");
        superscript.appendChild(link);
        //把sup添加到引用裏面最後的元素節點上
        elem.appendChild(superscript);
    }
}
addLoadEvent(displayCitations);