<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Explaining the Document Object Model</title>
<link rel="stylesheet" type="screen" href="styles/typography.css">
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/displayAccesskeys.js"></script>
</head>
<body>
<ul id="navigation">
<li><a href="index.html" accesskey="1">Home</a></li>
<li><a href="search.html" accesskey="4">Search</a></li>
<li><a href="contact.html" accesskey="0">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>
<script src="scripts/displayAbbreviations.js"></script>
<script src="scripts/displayCitations.js"></script>
</body>
</html>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
function displayAccesskeys() {
if (!document.getElementsByTagName || !document.createELement || !document.createTextNode)
return false;
//取得文档的所有链接
var links = document.getElementsByTagName("a");
//创建一个数组,保存访问键
var akeys = new Array();
//遍历链接
for (var i = 0; i < links.length; i++) {
var current_link = links[i];
//如果没有accesskey属性,继续循环
if (!current_link.getAttribute("accesskey")) continue;
//取得accesskey的值
var key = current_link.getAttribute("accesskey");
//取得链接文本
var text = current_link.lastChild.nodeValue;
//添加到数组
akeys[key] = text;
}
//创建列表
var list = document.createELement("ul");
//遍历访问键
for (key in akeys) {
var text = akeys[key];
//创建放到列表项的字符串
var str = key + ": " + text;
//创建列表项
var item = document.createELement("li");
var item_text = document.createTextNode(str);
item.appendChild(item_text);
//把列表项添加到列表中
list.appendChild(item);
}
//创建标题
var header = document.createELement("h3");
var header_text = document.createTextNode("Accesskeys");
header.appendChild(header_text);
//把标题添加到页面主体
document.body.appendChild(header);
//把列表添加到页面主体
document.body.appendChild(list);
}
addLoadEvent(displayAccesskeys);