您的位置：首页 > Web前端 > JavaScript

Javascript Dom 编程艺术 abbreviation

2015-05-23 10:20 197 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航