1.把文档里的缩略语显示为一个“缩略语列表”
2.把文档里的引用的每段文献节选生成一个“文献来源链接”
3.把文档所支持的快捷键显示为一份“快捷键清单”
explanation2.html
<title>Explaining the Document Object Model</title>
<link rel="stylesheet" media="screen" href="styles/typography.css"/>
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/displayAbbreviations.js"></script>
<script src="scripts/displayCitations.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>
<h1>What is the Document Object Modal?</h1>
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Modal">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>document.
</p>
</body>
typography.css
@charset "utf-8";
/* CSS Document */
body{
font-family:"Helvetica","Arial",sans-serif;
font-size:10pt;
}
abbr{
text-decoration:none;
border:0;
font-style:normal;
}
displayAbbreviations.js
// JavaScript Document
function displayAbbreviations(){
if(!document.getElementsByTagName||!document.createElement||!document.createTextNode)return false; //检查兼容性
var abbreviations=document.getElementsByTagName("abbr"); //所有abbr节点集合
if(abbreviations.length<1)return false; //判断abbreviations数组有多少个缩略语
var defs=new Array(); //保存每个abbr元素提供的信息
for(var i=0;i<abbreviations.length;i++){ //开始遍历数组
var current_abbr=abbreviations[i]; //被遍历的数组元素赋给一个变量
if(current_abbr.childNodes.length<1) continue; //
var definition=current_abbr.getAttribute("title"); //得到title属性值并保存到变量里
var key=current_abbr.lastChild.nodeValue; //得到文本节点的nodeValue属性并赋值给变量
defs[key]=definition; //保存到数组里
//defs[abbreviations[i].lastChild.nodeValue]=abbreviations[i].getAttribute("title");
}
var dlist=document.createElement("dl"); //创建一个定义列表元素
for(key in defs){ //对于defs关联数组里的每个键，把他的值赋给变量key
var definition=defs[key]; //第一次循环里，变量key值为W3C，变量definition值为World Web Consortium；第二次.....
var dtitle=document.createElement("dt"); //每次循环都需要创建一个dt和dd元素
var dtitle_text=document.createTextNode(key); //用变量key的值去创建一个文本节点
dtitle.appendChild(dtitle_text); //文本节dtitle_text点添加到元素节点dtitle
var ddesc=document.createElement("dd");
var ddesc_text=document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
dlist.appendChild(dtitle); //追加到dl元素上
dlist.appendChild(ddesc);
}
if(dlist.childNodes.length<1)return false;
var header=document.createElement("h2");
var header_text=document.createTextNode("Abbreviations");
header.appendChild(header_text); //插入这个定义列表之前先加一个描述性标题
//document.getElementsByTagName("body")[0];
document.body.appendChild(header);
document.body.appendChild(dlist); //插入标题和列表在body里用HTML-DOM
//window.onload=displayAbbreviations; //页面加载时被调用
}
addLoadEvent(displayAbbreviations);
addLoadEvent.js
// JavaScript Document
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
displayCitations.js
// JavaScript Document
function displayCitations(){
if(!document.getElementsByTagName||!document.createElement||!document.createTextNode)return false;
var quotes=document.getElementsByTagName("blockquote"); //取得所有引用
for(var i=0;i<quotes.length;i++){ //遍历引用
if(!quotes[i].getAttribute("cite")) continue; //如果没有cite属性，继续循环
var url=quotes[i].getAttribute("cite"); //保存cite属性
var quoteChildren=quotes[i].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);
displayAccessKeys.js
// JavaScript Document
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];
if(!current_link.getAttribute("accesskey")) continue;
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);
图片2.png
网友评论