|
8.1 不应该做什么
如果你察觉到自己正在使用DOM技术把一些重要的内容添加到网页上，应该立刻停止并检讨思路，因为很有可能你正在滥用DOM。
两个原则：1、渐进增强；2、平稳退化。
8.2 内容
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
<link rel ="stylesheet" media = "screen" href = "styles/8.css"/>
<title>Explaining The Document Object Model</title>
</head>
<body>
<h1>What Is The Document Object Model?</h1>
<p>
The <abbr title = "World Wide Web Consortion">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/addLoadEvent.js"></script>
// <script src = "scripts/displayAbbreviations.js"></script>
</body>
</html>
效果如图
优化一下，这样HTML文件有点太复杂，我们想把abbr标签的内容，拎出来，用一个页面集中显示。比如利用DOM在body中添加如下代码
<dl>
<dt>W3C</dt>
<dd>World Wide Web Consortium</dd>
<dt>DOM</dt>
<dd>Document Object Model</dd>
<dt>API</dt>
<dd>Application Programming Interface</dd>
<dd>HTML</dd>
<dd>HyperText Markup Language</dd>
<dt>XML</dt>
<dd>Extensible Markup Language</dd>
</dl>
displayAbbreviations.js
function displayAbbreviations(){
if(!document.getElementsByTagName||!document.createElement
||!document.createTextNode) return false;
var abbreviations = document.getElementsByTagName("abbr"); //获取abbr标签；
if(abbreviations.length < 1) return false;
var defs = new Array(); //创建数组，用以存储key 和 definition；
for(var i = 0 ;i<abbreviations.length;i++){
var current_abbr = abbreviations[i];
var definition = current_abbr.getAttribute("title"); //取definition
var key = current_abbr.lastChild.nodeValue; //取key
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.body.appendChild(header); //标题添加到body标签；
document.body.appendChild(dlist); //dlist添加到body标签；
}
addLoadEvent(displayAbbreviations);
最终效果
很难看，不是嘛。。
| 
转播
