在哪里摔倒
就在哪里自己爬起来
这是《JavaScript DOM编程艺术》第八章的内容，这里用到几个很少使用的标签，嗯，缩略词我是第一次使用的，先记录标签
缩略词标签
<abbr title="World Wide Web Consortium">W3C</abbr>
<acronym title="World Wide Web Consortium">W3C</acronym>
两个标签，书上讲了一堆，都是讲以前的浏览器大战，我只是知道，在看到后面的内容以前，我使用<abbr>标签在ie上调试了很久，最后是通过百度查到ie不支持<abbr>这个标签，ie里，使用的是<acronym>，显示效果和<a title="World Wide Web Consortium">W3C</a>一样子
上标、下标标签
<sub>下标</sub><sup>上标</sup>
快捷键
<a href="http://www.tiantiansoft.com" accesskey="5">TiantianSoft</a></li>
P158
这里使用数组的方式很好玩，像C#里的字典，不是用123456做下标，而是使用唯一的key做数组的下标，这种方法以前也没有试过，一直以为在js里没有字典表的，真笨蛋
下面是全部文件：
addLoadEvent.js
// JScript 文件
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
displayAbbreviations.js
//IE不能通过DOM来获取<abbr>属性，所以把全部abbr换成acronym标签
function displayAbbreviations()
{
//检查有效性
if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
//取所有的abbr节点
var aNode = document.getElementsByTagName("acronym");
if(aNode.length < 1) return false;
//定义数组，用来记录abbr节点的文本和title值
var defs = new Array();
//循环取每一个abbr节点的文本和title
var currentNode, value, key;
for(var i=0; i < aNode.length; i++)
{
currentNode = aNode[i];
value = currentNode.getAttribute("title");
key = currentNode.lastChild.nodeValue;
defs[key] = value;
}
/*生成要显示的内容
<dl>
<dt>title 1</dt>
<dd>description 1</dd>
<dt>title 2</dt>
<dd>description 2</dd>
<dl>
*/
var dl, dt, dd, dtText, ddText, value;
dl = document.createElement("dl");
//循环生成每一个dt和dd
for(key in defs)
{
//生成dt
dt = document.createElement("dt"); //生成标签dt
dtText = document.createTextNode(key); //生成标签里的文本内容
dt.appendChild(dtText); //把文本内容插入标签
//生成dd
value = defs[key];
dd = document.createElement("dd");
ddText = document.createTextNode(value);
dd.appendChild(ddText);
//把dt和dd，插入到dl里
dl.appendChild(dt);
dl.appendChild(dd);
}
//生成一个标题
var header = document.createElement("h2");
var headerText = document.createTextNode("Abbreviations");
header.appendChild(headerText);
//把标题附加到文档
document.body.appendChild(header);
//再附加上面生成的列表
document.body.appendChild(dl);
}
//调用函数
addLoadEvent(displayAbbreviations);
displayCitations.js
function displayCitations()
{
//检查有效性
if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
//取全部blockquote
var quotes = document.getElementsByTagName("blockquote");
//循环取所有blockquote
var url, quoteChildren, lastBoy, link, linkText, suberscript;
for(var i = 0; i < quotes.length; i++)
{
if(!quotes[i].getAttribute("cite")) continue; //如果没有cite属性，就跳过
//取blockquote的最后一个节点元素
quoteChildren = quotes[i].getElementsByTagName("*");
if(quoteChildren.length < 1) continue;
lastBoy = quoteChildren[quoteChildren.length - 1];
//生成source链接
url = quotes[i].getAttribute("cite");
link = document.createElement("a");
linkText = document.createTextNode("source");
link.appendChild(linkText);
link.setAttribute("href", url);
//生成sup标签
suberscript = document.createElement("sup");
suberscript.appendChild(link);
lastBoy.appendChild(suberscript);
}
}
addLoadEvent(displayCitations);
displayAccessKeys.js
function displayAccessKeys()
{
//检查有效性
if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
//取全部链接
var links = document.getElementsByTagName("a");
//设置数组保存快捷键
var akeys = new Array();
var currentLink, key, value;
for(var i = 0; i< links.length; i++)
{
currentLink = links[i];
if(!currentLink.getAttribute("accesskey")) continue;
key = currentLink.getAttribute("accesskey");
value = currentLink.lastChild.nodeValue;
akeys[key] = value;
}
//创建快捷键清单
var ul, li, liText;
ul = document.createElement("ul");
for(key in akeys)
{
value = key + ": " + akeys[key];
//创建li
li = document.createElement("li");
liText = document.createTextNode(value);
li.appendChild(liText);
ul.appendChild(li);
}
//生成标题
var header, headerText;
header = document.createElement("h3");
headerText = document.createTextNode("Accesskeys");
header.appendChild(headerText);
//添加到文档最后
document.body.appendChild(header);
//添加清单
document.body.appendChild(ul);
}
addLoadEvent(displayAccessKeys);
explanation.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Explaining the Document Object Model</title>
<script type="text/javascript" src=""></script>
<link rel="stylesheet" href="typography.css" type="text/css" media="screen" />
<script type="text/javascript" src="/addLoadEvent.js"></script>
<script type="text/javascript" src="/displayAbbreviations.js"></script>
<script type="text/javascript" src="/displayCitations.js"></script>
<script type="text/javascript" src="/displayAccessKeys.js"></script>
</head>
<body>
<ul id="navigation">
<li><a href="http://www.tiantiansoft.com" accesskey="5">TiantianSoft</a></li>
<li><a href="http://www.163.com" accesskey="6">163</a></li>
<li><a href="http://www.baidu.com" accesskey="7">baidu</a></li>
</ul>
<h1>What is the Document Object Model?</h1>
<p>
The <acronym title="World Wide Web Consortium">W3C</acronym> defines the <acronym title="Document Object Model">DOM</acronym> as:
</p>
<blockquote cite="http://www.w3c.org/DOM/">
<p>
A platform- and language-neutral interface the will allow programs and scripts to dynamically access and update the content, structure and style of documents.
</p>
</blockquote>
<p>
It is and <acronym title="Application Programming Interface">API</acronym> that can be used to navigate <acronym title="HyperText Markup Language">HTML</acronym> and <acronym title="eXtensible Markup Language">XML</acronym> documents.
</p>
<sup title="aa">aa</sup>
</body>
</html>
typography.css
body
{
font-family:"Helvetica", "Arial", Sans-Serif; font-size:14px;
}
a { text-decoration:none; border:0; font-style:normal; font-style:italic; }
