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

[toc]

---

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);
   2. 检查兼容性 这个函数用到了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.检索和添加信息

略