王雨的JavaScript练习02---复习DOM，充实文档内容

html：

<!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：

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

js：

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);

 

posted @ 2017-05-15 21:56  王雨的博客  阅读(121)  评论(0)  编辑  收藏  举报