<html>
<head>
<meta charset=utf-8 />
<title>Explaining the Document Object Model</title>
</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>
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.
</p>
</blockquote>
<p>It is an
<abbr title="Applicatoin Programming Interface">API</abbr>
that can be used to navigate
<abbr title="HyperText Markup Language">HTML</abbr>
and
<abbr id="fortest" title="eXtensible Markup Language">XML</abbr>
documents.
</p>
<script>
function displayAbbreviations(){
var abbrevistoins = document.getElementsByTagName("abbr");
if (abbrevistoins.length < 1) return false;
var defs = new Array();
for (var i = 0,j = abbrevistoins.length;i<j; i++) {
var definition = abbrevistoins[i].getAttribute("title");
var key = abbrevistoins[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 header_text = document.createTextNode("Abbrevistoins");
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(dlist);
}
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof oldonload != 'function') {
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(displayAbbreviations);
function displayCitations(){
var quotes = document.getElementsByTagName("blockquote");
for (var i = 0,j = quotes.length;i<j; i++) {
var current = quotes[i];
if (!current.getAttribute("cite")) continue;
var url = current.getAttribute("cite");
// 不用lastchild是因为很多dom方法只能用在元素节点(ex:appendChild),所以要确定我们找到的是元素节点
var quoteChildren = current.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);
};
}
addLoadEvent(displayCitations);
</script>
</body>
</html>
