《JavaScript DOM编程艺术》笔记：充实文档内容(六)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Test</title>
</head>
<body>
	<h1>What id the Document Object Model?</h1>
	<p>
		The <abbr title="World Wide Web Consortium">W3C</abbr> defines
		the <abbr title="Document Object Model">DOM</abbr> as:
	</p>
	<blockquote cite="http://www.w3.org/DOM/">
		<p>
		A platform- ans language-neutal 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 Progranming Interface">APT</abbr>
		that can be used to navigate <abbr title="HyperText Markup Languae">HTML</abbr> and <abbr title="eXtensible Markup Languae">XML</abbr>
		documents.
	</P>
	<script src="example.js"></script>
</body>
</html>

注：abbr标签与acronym这两个标签之间的区别一直纠缠不清。abbr标签的含义是缩略语，它是对单词或短语的简写形式的统称。<aronym>标签的含义是被当成一个单词来读的“首字母缩写词”。如果你把DOM念成一个单词dom，它就是一个首字母缩写词；如果你把它念成三个字母D-O-M,它就是一个缩略词。


body
{
	font-family: "Helvetice","Arial",sans-serif;
	font-size: 10pt;
}
abbr{
	text-decoration: none;
	border: 0;
	font-size: normal;
}

javascript

缩略语的title属性在浏览器里是隐藏的。有些浏览器会在你把鼠标指针悬停在缩略语上时，将它的title属性显示为一个弹出式的提示消息。就像浏览器所使用的默认样式一样，浏览器对缩略语的默认呈现行为也是各有各的做法。

function displayAbbreviations()
{

	//检查兼容性
	if(!document.getElementsByTagName) return false;
	if(!document.createElement) return false;
	if(!document.createTextNode) return false;



	//遍历这份文档中的所有abbr元素
	//找出abbr元素节点集合
	var abbreviations = document.getElementsByTagName("abbr");
	if(abbreviations.length<1 ) return false;
	//用来保存每一个节点的信息
	var defs = new Array();
	for (var i = 0 ;i < abbreviations.length ; i++)
	{
		var current_abbr = abbreviations[i];
		//保存每个abbr的title属性
		var definition = current_abbr.getAttribute("title");
		//保存每个abbr元素包含的文本
		var key = current_abbr.lastChild.nodeValue;

		defs[key] = definition;
	}

	//创建标记
	//定义列表是表现缩略语句及其解释的理想结构。定义列表（<dl>）由一系列"定义标题"（<dt>）和相应的"定义描述"（<dd>）构成：
	//<dl>
	//  <dt>Title 1</dt>
	//  <dd>Description1</dd>
	//  <dt>Title 2</dt>
	//  <dd>Description2</dd>
	//<dl>
	//用createElement方法创建这个定义列表，并把这个创新的元素赋值给变量dlist：
	var dlist = document.createElement("dl");
	//遍历defs数组。
	//每次循环都需要创建一个dt元素和一个dd元素，我们还需要创建相应的文本节点并把它们分别添加到新创建的dt和dd元素。

	for(key in defs){
		var definition = defs[key];
		//创建dt元素
		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);

		//把dt和dd追加到dl上
		dlist.appendChild(dtitle);
		dlist.appendChild(ddesc);
	}

	//插入定义列表
	//创建一个h2元素节点
	var header = document.createElement("h2");
	//创建一个内容为Abbreviations的文本节点：
	var header_text = document.createTextNode("Abbreviations");

	//把文本加入到h2元素节点
	header.appendChild(header_text);


	//把新创建的元素追加到body标签上即可
	//引用body的方法有两种
	//DOM Core 即引用某个给定文档的第一个body标签：
	//document.getElementsByTagName("body")[0];
	//第二种 引用某给定文档的属性：
	//document.body
	//
	//插入缩略语的标题
	document.body.appendChild(header);
	//插入缩略语本身
	document.body.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);

显示文献来源链接表

function displayCitations() {

	//找出文档里所有的blockquote元素
	var quotes = document.getElementsByTagName("blockquote");
	//遍历这个集合
	for(var i = 0 ;i<quotes.length ; i++)
	{
		//用getAttribute方法测试节点集合quotes中的当前元素，如果getAttribute结果为真，就说明这个节点有cite属性。
		if(!quotes[i].getAttribute("cite")){
			continue;
		}
		//得到当前的blockquote元素的cite属性值并把它存入变量url
		var url = quotes[i].getAttribute("cite");
		//一个blockquote元素必定包含块级元素，如果文本段落，以容纳被引用的大段文本。
		//找到当前blockquote元素的lastChild属性
		//quotes[i].lastChild
		//找出当前blockquote元素里的所有元素节点
		var quoteElements = quotes[i].getElementsByTagName("*");
		if(quoteElements.length < 1) continue;
		var elem = quoteElements[quoteElements.length-1];

		//创建一个链接元素
		var link = document.createElement("a");
		var link_text = document.createTextNode("source");
		link.appendChild(link_text);
		//把href属性添加给新链接。用setAttribute方法把它设置为变量url的值
		link.setAttribute("href",url);

		//创建一个sup元素节点并把它存入变量superscript
		var superscript = document.createElement("sup");
		//把新链接放入这个sup元素
		superscript.appendChild(link);

		//把这个标记插入文档，你要把变量superscript追加为变量elem的最后一个子节点。因为变量elem对应着blockquote元素目前所包含的最后一个元素节点
		//这个上标形式的新链接将出现在文献节选后面。
		elem.appendChild(superscript);
	}
}
addLoadEvent(displayCitations);

显示快捷清单

	<ul id="navigation">
		<li><a href="index.html" accesskey="1">Home</a></li>
		<li><a href="serch.html" accesskey="4">Search</a></li>
		<li><a href="contact.html" accesskey="9">Contact</a></li>
	</ul>

把段代码添加到<body>标签后面。

//accessKey属性可以把一个元素与键盘上的某个特定按键关联在一起。
function displayAccesskeys() {
	if (!document.getElementsByTagName ||　!document.createElement||!document.createTextNode) return false;
	//取得文档中的所有链接
	var links = document.getElementsByTagName("a");
	//创建一个数组，保存访问键
	var akeys = new Array();
	//遍历链接
	for (var i = 0; i< links.length ; i++) {
		var current_link = links[i];
		//如果没有accesskey属性，继续循环
		if(!current_link.getAttribute("accessKey")) continue;
		//取得accesskey属性
		var key = current_link.getAttribute("accessKey");
		//取得链接文本
		var text = current_link.lastChild.nodeValue;
		//添加到数据
		akeys[key] = text;
	}
	//创建列表
	var list = document.createElement("ul");
	//遍历访问键
	for (key in akeys) {
		var text = akeys[key];
		//创建放到列表项中的字符串
		var str = key +":"+text;
		//创建列表项
		var item = document.createElement("li");
		var item_text = document.createTextNode(str);
		item.appendChild(item_text);
		//把列表项添加到列表中
		list.appendChild(item);

	}
	//创建标题
	var header = document.createElement("h3");
	var header_text = document.createTextNode("Accesskeys");
	header.appendChild(header_text);
	//把标题添加到页面主体
	document.body.appendChild(header);
	//把列表添加到页面主体
	document.body.appendChild(list);
	// body...
}
addLoadEvent(displayAccesskeys);

《JavaScript DOM编程艺术》笔记：充实文档内容(六)

javascript

显示文献来源链接表

显示快捷清单

猜你喜欢