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.检索和添加信息

略

posted @ 2017-09-21 10:28  阿浩yohann  阅读(87)  评论(0)  编辑  收藏  举报