java script 显示缩略词

蔚落 2022-08-21 00:08 139阅读 0赞

1.  循序渐进：从最核心的内容开始，逐步添加额外的内容
2.  display inline 把所有的元素放在一行显示，横向显示（以内联元素的形式显示）  
    block 把所有的元素分行单独显示（以块元素的形式显示）  
    none 不显示，仍是DOM树的组成部分，只是不显示而已。  
    3.:缩略语 IE不支持
3.  代码  
    html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link rel="stylesheet" type="text/css" media="screen" href="test8.css" />
    <script type="text/javascript" src="test8.js"></script>
    </head>
    <body>
    <h1>What is the Document Object Model?</h1>
    <p>
     The <abbr title="World Wide Web Consortium">W3C</ 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>

css

/* CSS Document */
    
    body{ font-family:Arial, Helvetica, sans-serif; font-size:10px; }
    abbr{ text-decoration:none; border:0; font-style:normal; }

// JavaScript Document
    function dispalyAbbr(){ 
        var abbr=document.getElementsByTagName("abbr");//返回的是一个数组
        if(abbr.length<1)  return false;
        var defs=new Array();
        for (var i=0;i<abbr.length;i++)
            {   var current_abbr=abbr[i];
            if (current_abbr.childNodes.length<1) continue;//解决IE不支持abbr
            var definition=abbr[i].getAttribute("title");//找到缩略词代表的单词
             var key=abbr[i].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);  
            //把新创建的节点追加到list
            dlist.appendChild(dtitle);
            dlist.appendChild(ddesc);
            }
            if (dlist.childNodes.length<1) return false;
        //创建一个标题
        var header=document.createElement("h2");
        var header_text=document.createTextNode("abbr");
        header.appendChild(header_text);
        document.body.appendChild(header);
        document.body.appendChild(dlist);
    }
    window.onload=displayAbbr;

显示文献来源

function displaycite(){
        //get all blockquotes
        var quotes=document.getElementsByTagName("blockquote");
        if (!quotes[i].getAttribute("cite"))  continue;
        for (var i=0;i<quotes[i];i++){
            // if no cite,continue
           if （quoteChildren.length<1） continue;
            var url=quotes[i].getAttribute("cite");//找到网址
            //get all element nodes in the blockquote
            var quoteChildren=quotes[i].getElementsByTagName("*");  
            var elem=quoteChildren[quoteChildren.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);
        }
    }
    window.onload=displaycite;