Javascript Dom 编程艺术 abbreviation_javascript displayabbreviation-优快云博客

本文介绍如何使用JavaScript操作DOM，实现自定义缩写和引用的动态展示。通过解析HTML文档，提取并显示缩写词及其全称，同时为带有源链接的引用添加注释。

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) return false;
    if(!document.createElement) return false;
    if(!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++)
    {
	if(abbreviations[i].childNodes.length<1) continue;
        //防止之前的IE浏览器抽风
        
	var definition=abbreviations[i].getAttribute("title");//少写了个i！！！
	//console.log(definition);
	var key=abbreviations[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);
	dlist.appendChild(dtitle);
	dlist.appendChild(ddesc);
    }
    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);
}
addLoadEvent(displayAbbreviations);
addLoadEvent(displayCitations);

function displayCitations()
{
    if(!document.getElementsByTagName) return false;
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;
    var quotes=document.getElementsByTagName("blockquote");
    for(var i=0;i<quotes.length;i++)
    {
	if(!quotes[i].getAttribute("cite")) continue;
	var url=quotes[i].getAttribute("cite");
	var quoteChildren=quotes[i].getElementsByTagName("*");//''
	if(quoteChildren.length<1) continue;
	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);
    }
}

body{
    font-family:"Helvetica","Arial",sans-serif;
    font-size:10pt;
}
abbr{
    text-decoration:none;
    border:0;
    font-style:normal;
}

<doctype html>
<html>
    <head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<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/displayCitations.js"></script>
	<script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
	<title>Explaining the Docment Object Model</title>
    </head>
    <body>
    <ul id="navigation">
    <li><a href="index.html" accesskey="1">Home</a></li>
    <li><a href="www.baidu.com" accesskey="2">Search</a></li>
    <li><a href="index.html" accesskey="3">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 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>