javascript dom编程艺术学习笔记之充实的文档内容

---

1.不应该做什么

不要使用dom技术把一些重要的东西加到网页上，你可能正在滥用dom
我们要始终牢记两个原则
- 渐进增强
从核心内容开始，逐渐用css和javascript增强内容
- 平稳退化
缺乏某些javascript和dom支持，任然可以访问你的核心内容

2.把“不可见”变为“可见”

我们可以用css把原本纵向排列的元素显示在一行，设置display属性为inline

不同的浏览器呈现例外的属性千姿百态，有些浏览器会把title属性显示为弹出式的提示框，另一些浏览器会把它显示在状态栏里。

有些浏览器把alt设置为弹出式的提示框，alt属性的原本用途：在图片无法显示时，用一段文字来描述图片

本章内容：
- 得到隐藏在属性的信息
- 创建标记封装这些信息
- 把这些标记插在文档中

3. 内容

<abbr>标签是缩略语
<acronym>标签是首字母缩写词
dom念成一个单词就是首字母缩写词，念成三个字母就是缩略语

3.1.选用HTML,XHTML还是HTML5

对于标记语言选择HTML还是XHTML是你的自由，但是使用的标记必须和你选用的 DOCTYPE声明保持一致

建议使用XHTML，语言有求严格

HTML5文档类型声明简单，才15个字符

3.2 css

略

3.3 javascript

缩略语标签title属性是隐藏的，我们可以用dom改变浏览器的默认行为

4. 显示“缩略语列表”

把<abbr>标签的title属性集中显示在一个界面，用一个定义列表元素显示标签包含的文本和title属性
定义列表如下

<dl>javascript    <dt>W3C</dt>    <dd>描述</dd>    <dt>DOM</dt>    <dd>描述</dd>    <dt>API</dt>    <dd>描述</dd>    <dt>HTML</dt>    <dd>描述</dd> 

可以用DOM创建这个元素
- 遍历这个元素所有abbr元素
- 保存每隔abbr元素的title属性
- 保存每个abbr的文本
- 创建一个定义列表元素dl
- 遍历刚刚保存的title属性和abbr文本
- 创建一个定义标题元素dt
- 把abbr文本插入dt
- 创建一个定义描述于元素dd
- 把title属性插入dd
- 把dt追加到dl
- 把dd追加到dl
- 把dl追加到body元素

4.1 编写displayAbbreviations函数

functin displayAbbreviations(){    var abbreviations = document.getElementByTagName("abbr");    if (abbreviations.length < 1) return false;    var defs = new Array();    for (var i = 0; i < abbreviattions.length; i++){        var current_abbr = abbreviations[i];        var definition = curent_abbr.getAttribute("title");        bar key = current_abbr.lastChilde.nodeValue;        def[key] = definition;        }    }

把循环体写成一条语句，比较难读

for (var i = 0; i < abbreviattions.length; i++){    defs[abbreviations[i].lastChilde.nodeValue] = abbreviations[i].getAttribute("title");    }

4.2 创建标记

<dl>        <dt>Title 1</dt>        <dd>Description 1</dd>        <dt>Title 2</dt>        <dd>>Description 2</dd>

创建定义列表

for (key in defs){    var definition = def[key];    var dtitle = document.creatElement("dt");    var dtitle_text = document.creatTextNode(key);    dtitle.appendChild(dtitle_text);    var ddesc = document.creatElement("dd");    var ddesc_text = document.creatTextNode(definition);    ddesc.appendchild(ddesc_text);    dlidt.appendChild(dtitle);    dlidt.appendChild(ddesc);}

1. 插入定义列表
   
   • 创建h2元素节点
   • 创建内容为Abbreviations的文本节点
   • 把文本节点插入h2元素节点
     引用body标签有两种做法
     第一种：使用DOM Core document.getElementByTagName("body")[0]
     第二种：使用HTML-DOM
     插入缩略语表标题：document.body.appendChild(header);
     插入缩略语表本身: document.body.appendChild(dlist);
     
     1. 检查兼容性
        这个函数用到了getElementByTagName，creatELement，creatTextNode

    function displayAbbreviations() {  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;// get all the abbreviations  var abbreviations = document.getElementsByTagName("abbr");  if (abbreviations.length < 1) return false;  var defs = new Array();// loop through the abbreviations  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;    defs[key] = definition;  }// create the definition list  var dlist = document.createElement("dl");// loop through the definitions  for (key in defs) {    var definition = defs[key];// create the definition title    var dtitle = document.createElement("dt");    var dtitle_text = document.createTextNode(key);    dtitle.appendChild(dtitle_text);// create the definition description    var ddesc = document.createElement("dd");    var ddesc_text = document.createTextNode(definition);    ddesc.appendChild(ddesc_text);// add them to the definition list    dlist.appendChild(dtitle);    dlist.appendChild(ddesc);  }  //if (dlist.childNodes.length < 1) return false;// create a headline  var header = document.createElement("h2");  var header_text = document.createTextNode("Abbreviations");  header.appendChild(header_text);// add the headline to the body  document.body.appendChild(header);// add the definition list to the body  document.body.appendChild(dlist);}addLoadEvent(displayAbbreviations);

addLoadEvent函数

function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {    window.onload = func;  } else {    window.onload = function() {      oldonload();      func();    }  }}

4.3. 浏览器地雷

如果把displayAbbreviation脚本在IE6，或者更早的window版本打开，则javascript出错
在网景公司与微软的浏览器大战中，微软决定不在自己的浏览器实现abbr元素，这就是地雷
解决方法：保证该函数能在IE中平稳退化

    function displayAbbreviations() {  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;// get all the abbreviations  var abbreviations = document.getElementsByTagName("abbr");  if (abbreviations.length < 1) return false;  var defs = new Array();// loop through the abbreviations  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;    defs[key] = definition;  }// create the definition list  var dlist = document.createElement("dl");// loop through the definitions  for (key in defs) {    var definition = defs[key];// create the definition title    var dtitle = document.createElement("dt");    var dtitle_text = document.createTextNode(key);    dtitle.appendChild(dtitle_text);// create the definition description    var ddesc = document.createElement("dd");    var ddesc_text = document.createTextNode(definition);    ddesc.appendChild(ddesc_text);// add them to the definition list    dlist.appendChild(dtitle);    dlist.appendChild(ddesc);  }  **if (dlist.childNodes.length < 1) return false;**// create a headline  var header = document.createElement("h2");  var header_text = document.createTextNode("Abbreviations");  header.appendChild(header_text);// add the headline to the body  document.body.appendChild(header);// add the definition list to the body  document.body.appendChild(dlist);}addLoadEvent(displayAbbreviations);

第一条语句：如果当前元素没有子节点，就立刻开始下一循环
第二条语句：如果对应缩略语dl元素没有子节点，立刻退出displayAbbreviations函数

5. 显示“文献来源链接表”

blockquote元素包含一个cite属性，可选属性，可以给他一个url地址。把文献资料和相关网页链接起来的做好方法。
在实践中，浏览器会忽视这个属性，用户无法看到，我们可以利用javascript和dom把收集，显示在网页上
- 遍历所有blockquote元素
- 从blockquote中提取cite属性值
- 创建一个标识文本是source的链接
- 把这个链接的值赋值给cite属性值
- 把这个链接插入文献节选的末尾

编写displayCitations函数

function displayCitations() {  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;// get all the blockquotes  var quotes = document.getElementsByTagName("blockquote");// loop through all the blockquotes  for (var i=0; i<quotes.length; i++) {// if there is no cite attribute, continue the loop    if (!quotes[i].hasAttribute("cite")) continue;// store the cite attribute    var url = quotes[i].getAttribute("cite");// get all the element nodes in the blockquote    var quoteChildren = quotes[i].getElementsByTagName('*');// if there are no element nodes, continue the loop    if (quoteChildren.length < 1) continue;// get the last element node in the blockquote    var elem = quoteChildren[quoteChildren.length - 1];// create the markup    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);// add the markup to the last element node in the blockquote    elem.appendChild(superscript);  }}addLoadEvent(displayCitations);

6.显示快捷键清单

编写一个函数把文档中所有用到的快捷键显示在页面里
accesskey属性可以把一个元素与键盘上特定按键关联在一起
一些基本快捷键约定成俗的设置方法
- accesskey = 1对应“返回本网站主页”的链接
- accesskey = 2 对应“后退到前一页面”
- accesskey = 4 对应“打开本网站搜索页面”
- accesskey = 9 对应“本网站联系方法”
- accesskey = 0 对应“查看本网站的快捷键清单”

利用DOM动态创建快捷键清单

• 把文档所有链接提取到一个节点集合中
• 遍历所有节点集合链接
• 如果某个链接带有accesskey属性，把他的值保存下来
• 把链接显示在浏览器窗口的屏显标识文字也保存起来
• 创建清单
• 为拥有快捷键的链接创建列表项（li元素）
• 把列表项添加到“快捷键清单”
• 把快捷键清单添加到文档

function displayAccesskeys() {  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;// get all the links in the document  var links = document.getElementsByTagName("a");// create an array to store the accesskeys  var akeys = new Array();// loop through the links  for (var i=0; i<links.length; i++) {    var current_link = links[i];// if there is no accesskey attribute, continue the loop    if (current_link.getAttribute("accesskey") == null) continue;// get the value of the accesskey    var key = current_link.getAttribute("accesskey");// get the value of the link text    var text = current_link.lastChild.nodeValue;// add them to the array    akeys[key] = text;  }// create the list  var list = document.createElement("ul");// loop through the accesskeys  for (key in akeys) {    var text = akeys[key];//  create the string to put in the list item    var str = key + " : "+text;// create the list item    var item = document.createElement("li");    var item_text = document.createTextNode(str);    item.appendChild(item_text);// add the list item to the list    list.appendChild(item);  }// create a headline  var header = document.createElement("h3");  var header_text = document.createTextNode("Accesskeys");  header.appendChild(header_text);// add the headline to the body  document.body.appendChild(header);// add the list to the body  document.body.appendChild(list);}addLoadEvent(displayAccesskeys);

7.检索和添加信息

略