JS显示文献来源和缩略词
<html>
<head>
<title></title>
<style type="text/css">
abbr{
text-decoration:underline;
}
body{
background-color:#ccc;
color:#333;
font-size: 20px;
}
</style>
</head>
<body>
<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 languange-neutral interfa5ce that will allow programs and
scripts to dynamically access and update the content,structer 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 Languange">HTML</abbr> and <abbr title="eXtend Markup Language">XML</abbr> documents.
</p>
</body>
<script>
window.onload = function(){
displayAbbreviations();
displayCitations();
};
//此函数显示缩略词
function displayAbbreviations(){
var abbereviations = document.getElementsByTagName("abbr");
if(abbereviations.length<1){
return false;
}
//自己的方法
// for(var i = 0;i<abbereviations.length;i++){
// var body_element = document.getElementsByTagName("body")[0];
// var text = abbereviations[i].lastChild.nodeValue;
// var discription = abbereviations[i].getAttribute("title");
// alert(text);
// var def = document.createElement("p");
// var info = document.createTextNode(text+" "+discription);
// def.appendChild(info);
// body_element.appendChild(def);
// }
//教材方法
var defs = new Array();
for(var i = 0;i<abbereviations.length;i++){
var current_abbbr = abbereviations[i];
if(current_abbbr.childNodes.length<1) continue;
var definition = abbereviations[i].getAttribute("title");
var key = abbereviations[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);
}
var header = document.createElement("h2");
var body_element = document.getElementsByTagName("body")[0];
var header_text = document.createTextNode("Abbereviations");
header.appendChild(header_text);
body_element.appendChild(header);
body_element.appendChild(dlist);
}
//此函数显示文献来源链接表
function displayCitations(){
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");
//找出quote[i]里的所有元素节点
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);
}
}
</script>
</html>
