DOM解析与操作-优快云博客

本文链接：https://blog.youkuaiyun.com/unaMattin/article/details/53410124
<html>
<head>
    <title>第八章 充实文档内容 </title>
</head>
<body>
    <h1>what is Document Object Model</h1>
    <p>the <abbr title="Word 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 tha will allow programs and script 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>tha 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="index.html"   accesskey="1">Home</a></li>
        <li><a href="searh.html"   accesskey="4">Search</a></li>
        <li><a href="contact.html" accesskey="9">Contact</a></li>
    </ul>


</body>
<script type="text/javascript">
    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 (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;
        }
        //创建定义列表
        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);
        }
        //解决IE报错
        if(dlist.childNodes.length<1)return false;
        //创建标题
        var header=document.createElement("h2");
        var header_text=document.createTextNode("Abbreviations")
        header.appendChild(header_text);
        //把标题添，列表加到页面主题
        document.body.appendChild(header);
        document.body.appendChild(dlist);
    }

    //2.创建一个文献来源链接表
    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属性
            var url=quotes[i].getAttribute("cite");
        //取得元素节点
            var qutoeChildren=quotes[i].getElementsByTagName('*');
        //如果没有元素节点，继续循环
            if(qutoeChildren.length<1)continue;
        //取得引用中最后一个元素节点
            var elem=qutoeChildren[qutoeChildren.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);
        };
    }

    //3.创建一个快捷清单
    function displayAcceskeys(){
    //检测
    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];
        //如果没accesskey属性的值，继续循环
            if (!current_link.getAttribute("accesskey"))continue;
        //取得accesskey的值
            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(displayAbbreviations);
        addLoadEvent(displayCitations);
        addLoadEvent(displayAcceskeys);

    /*
        本章完成了三件事情：
            1.把文档里的缩略语显示为一个“缩略语列表”。
            2.为文档里引用的每段文献节选生产一个“文献来源链接”。
            3.把文档所支持的快捷键显示为一份“快捷键清单”。

        自己写demo的时候，不是很理想，出现了许多报错，一步步回头检查。
        大多都是不细心写错字符造成。


    */
</script>
</html>