重要原则
- 渐进增强
从核心部分，内容开始。根据内容使用标记实现良好的结构，然后通过CSS改进呈现效果，或者通过DOM添加各种行为。
- 平稳退化
渐进增强的实现必然支持平稳退化。缺少CSS和DOM支持的访问者仍可以访问到你的核心内容。
控制某些属性的滥用
alt属性原本的作用：在图片不可用(无法显示)时用一段描述文字来解释这个位置的图片。
在显示属性这个问题上，你只能听任浏览器摆布。其实不是这样的，你只需要一点点的DOM编程，我们就能够把这种控制权重新掌握在自己手里。
- 得到隐藏在属性里的信息
- 创建标记封装这些信息
- 把这些标记插入到文档中
内容
<abbr> abbreviation，它是对单词或短语的简写形式的统称。
<acronym> acronym，首字母缩写词。
浏览器都有自己默认的样式，我们可以使用自己定义的CSS样式来取代它们。
显示“缩略语列表”
功能：把<abbr>标签中的title属性集中起来显示在一个页面。用定义列表元素来显示<abbr>标签包含的文本和title属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Explaining the Document Object Model</title>
<script type="text/javascript" src="scripts/addLoadEvent.js"></script>
<script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
</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>
</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="eXtendsible Markup Language">XML</abbr> documents.
</p>
</body>
</html>
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添加到文档中即可。图片运行如下：
屏幕快照 2017-02-12 下午12.57.58.png
需要注意一点的是：微软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技术创建核心内容。
网友评论