重要原则
- 渐进增强
从核心部分，内容开始。根据内容使用标记实现良好的结构，然后通过CSS改进呈现效果，或者通过DOM添加各种行为。
- 平稳退化
渐进增强的实现必然支持平稳退化。缺少CSS和DOM支持的访问者仍可以访问到你的核心内容。
控制某些属性的滥用
alt属性原本的作用：在图片不可用(无法显示)时用一段描述文字来解释这个位置的图片。
在显示属性这个问题上，你只能听任浏览器摆布。其实不是这样的，你只需要一点点的DOM编程，我们就能够把这种控制权重新掌握在自己手里。
- 得到隐藏在属性里的信息
- 创建标记封装这些信息
- 把这些标记插入到文档中
内容
abbreviation，它是对单词或短语的简写形式的统称。
acronym，首字母缩写词。
浏览器都有自己默认的样式，我们可以使用自己定义的CSS样式来取代它们。
显示“缩略语列表”
功能：把标签中的title属性集中起来显示在一个页面。用定义列表元素来显示标签包含的文本和title属性。
Explaining the Document Object Model
What is the Document Object Model?
The
W3C
defines the
DOM
A platform and language-neutral interface that will allow programs and scripts to dynamically access and update the content,structure and style of documents.
It is an
API
that can be used to navigate
HTML and
XML documents.
function displayAbbreviations(){
//检查兼容性
if(!document.getElementsByTagName||
!document.createElement||
!document.createTextNode)return false;
//遍历找出所有的abbr元素
var abbreviations=document.getElementsByTagName("abbr");
if(abbreviations.length<1)return false;
//存储abbr标签文本及title属性的值
var defs=new Array();
for (var i = 0; i < abbreviations.length; i++) {
var current_abbr=abbreviations[i];
var definition=current_abbr.getAttribute("title");
var key=current_abbr.lastChild.nodeValue;
//将key作为数组的下标，definition作为它对应的值。
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.getElementsByTagName("body")[0].appendChild(header);
document.getElementsByTagName("body")[0].appendChild(dlist);
}
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
addLoadEvent(displayAbbreviations);
然后将JS添加到文档中即可。图片运行如下：
需要注意一点的是：微软IE浏览器直到IE7才支持abbr元素，而这之间的该元素的对应元素是acronym
可以增加这样一句话来解决问题。
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");
var key=current_abbr.lastChild.nodeValue;
//将key作为数组的下标，definition作为它对应的值。
defs[key]=definition;
}
因为IE浏览器在统计abbr元素的子节点个数时总是返回一个错误的值——零，所以这条新语句会让IE浏览器不再继续执行这个循环中的后续代码。
显示“文献来源链接表”
blockquote元素包含一个属性cite。这是一个可选属性，你可以给它一个URL地址，告诉人们blockquote元素的内容引自哪里。编写以下函数需要注意的地方有：有些浏览器会把换行符解释为一个文本节点，这样以来，如果在p节点和blockquote节点中存在一个换行符的话，那么blockquote元素节点的lastChild属性就将是一个文本节点而不是p元素节点。所以我们需要判断。
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(!blockquote.getAttribute("cite"))continue;
var blockquote=quotes[i];
var cite=blockquote.getAttribute("cite");
var quoteChildren=blockquote.getElementsByTagName('*');
if(quoteChildren.length<1)continue;
var elem=quoteChildren[quoteChildren.length-1];
var link=document.createElement("a");
var source=document.createTextNode("source");
link.appendChild(source);
link.setAttribute("href",cite);
var superscript=document.createElement('sup');
superscript.appendChild(link);
elem.appendChild(superscript);
}
}
显示“快捷键清单”
access属性可以把一个元素(如链接)与键盘上的某个特定按键关联在一起。一般来说，在适用于Windows系统的浏览器里，快捷键的用法是在键盘上同时按下Alt键和特定按键；在适用于Mac系统的浏览器里，快捷键的用法是同时按下Ctrl键和特定键。
function displayAccessKeys(){
if(!document.getElementsByTagName||
!document.createElement||
!document.createTextNode)return false;
var linkElements=document.getElementsByTagName("a");
var defs=new Array();
for (var i = 0; i < linkElements.length; i++) {
if(!linkElements[i].getAttribute("accesskey"))continue;
var accesskey=linkElements[i].getAttribute("accesskey");
var linkText=linkElements[i].lastChild.nodeValue;
defs[accesskey]=linkText;
}
var list=document.createElement("ul");
for(key in defs){
var text=defs[key];
var str=key+":"+text;
var item=document.createElement("li");
var itemText=document.createTextNode(str);
item.appendChild(itemText);
list.appendChild(item);
}
var header=document.createElement("h3");
var headerText=document.createTextNode("AccessKeys");
header.appendChild(headerText);
document.body.appendChild(header);
document.body.appendChild(list);
}
addLoadEvent(displayAccessKeys);
检索和添加信息
在需要对文档里的现有信息进行检索时，以下DOM方法最有用；
- getElementById
- getElementByTagName
- getAttribute
在需要把信息添加到文档里去时，以下DOM方法最有用：
- createElement
- createTextNode
- appendChild
- insertBefore
- setAttribute
JS脚本只应该用来充实文档的内容，要避免使用DOM技术创建核心内容。