HTML代码
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>充实文档内容</title>
<link rel="stylesheet" href="css/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="www.w3c.org/DOM/">
<p>
Aplatform- and language-neutral interface that will allow programs and scripts to dynamically
access and update the content,structure and style of documnents.
</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 type="text/javascript" src="js/displayAbbreviations.js"></script>
</body> </html>
JavaScript代码
//页面加载完时执行函数
function addloadevent(func) { //参数放入你界面加载完要执行的函数
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
oldonload();
func();
}
}
function displayAbbreviations() {
// 检查元素是否兼容
if (!document.createElement || !document.getElementsByTagName || !document.createTextNode) return false;
//获取文档所有abbr标签
var abbreviations = document.getElementsByTagName("abbr"); //判断如果文档没有abbr标签，函数执行结束。
if(abbreviations.length < 1) return false;
//创建一个数组用来存储abbr的title属性值
var defs = new Array();
//便利abbr标签
for(var i = 0 ; i<abbreviations.length;i++){
//获取abbr中的属性值存入definition变量中
var definition = abbreviations[i].getAttribute("title");
//获取abbr中的缩略语句
var key = abbreviations[i].lastChild.nodeValue;
//将2个变量存入数组中，key用作数组元素的小标(键)来存储，definition用作数组元素的值来存储
defs[key] = definition;
}
//创建标记节点
var dlist = document.createElement("dl");
//循环取出数组中的键 和值
for (key in defs) {
var definition = defs[key];
//创建一个dt标签
var dtitle = document.createElement("dt");
//用变量key的值创建一个文本节点
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
//同样操作 ↑ 创建dd标签
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
//创建好的标签插入dl中
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
//创建一个H2标题
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
//创建好的列表和标题插入body中
document.body.appendChild(header);
document.body.appendChild(dlist); }
addloadevent(displayAbbreviations);