2020年6月11日
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explaining the Document Object Model</title>
<link rel="stylesheet" href="typography.css">
</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 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>
<script src="../js/addLoadEvent.js"></script>
<script src="displayAbbreviations.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
font-family: "Consolas";
font-size: 10pt;
}
abbr {
text-decoration: none;
border: 0;
font-style: normal;
}
function addLoadEvent(func){ //onload事件綁定函數
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
function displayAbbreviations(){
if(!document.getElementsByTagName||
!document.createElement||
!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++){
var definition = abbreviations[i].getAttribute("title");
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);
}
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);