欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

充实文档——略缩语列表 文献来源链接 快捷键清单

程序员文章站 2022-06-02 23:23:21
...

这篇博客主要是对DOM方法的练习，同时也考虑网页的兼容性可访问性。我们将设计几个实用的小功能来进行练习。下面看这样一段HTML标记：

<!DOCTYPE html>
<html>
<head>
	
	<title>Explaining the Document Object Model！</title>
</head>
<body>
	<h1>What is the Document Subject 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 platfrom- 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>
</body>
</html>

这段标记直接用浏览器打开是：
充实文档——略缩语列表 文献来源链接 快捷键清单
现在我们完成三个任务：
（1）给略缩语创建略缩语列表，显示他们
（2） 给文献创建文献来源列表，显示他们
（3）设置快捷键，给快捷键创建快捷键列表，显示他们

1. 创建略缩语列表

我们想要创建一个略缩语自定义列表，展示略缩语中的内容，这样一来阅读将会更加方便：

<h2>Abbreviations</h2>
<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>

	<dt>XML</dt>
	<dd>extensible Markup Language</dd>
</dl>

当然我们可以直接修改标记，但是这里我们用DOM方法修改，这将会是一个不错的小技巧，修改步骤如下：
（1）历遍这个abbr标签数组
（2）保存每一个abbr的标签title属性
（3）保存每一个abbr标签的文本
（4）创建一个自定义列表元素dl
（5）历遍保存的标签数组
（6）创建一个自定义标题元素dt
（7）把abbr的标签title属性插入到dt上
（8）创建一个自定义描述元素dd
（9）吧abbr的文本插入到dd元素上
（10）把dt，dd追加到dl元素上
（11）创建一个h2元素，追加文本节点
（13）把h2元素和dl元素追加到body元素上

我们将会编写displayAbbreviations()函数来处理上述步骤：

function addLoadEvent(func)
{//为了后续添加函数，addLoadEvent（）十分重要，
	var old=window.onload;
	if(typeof window.onload!='function')
	{
		window.onload=func;
	}
	else
	{
		window.onload=function()
		{
			old();
			func();
		}
	}
}
addLoadEvent(displayAbbreviations);
function displayAbbreviations()
{
	var abbreviations=document.getElementsByTagName("abbr");
	if (abbreviations.length<1) return false;

	var defs=new Array();
	for(var i=0;i<abbreviations.length;i++)
	{
		var definition=abbreviations[i].getAttribute("title");//取出title属性
		//var key=abbreviations[i].lastChild.nodeValue;//取出文本节点
		var key=abbreviations[i].innerHTML;//取出文本节点
		defs[key]=definition;//存入数组
	}

	var dlist=document.createElement("dl");
	for(key in defs)
	{
		var dtitle=document.createElement("dt");
		var ddesc=document.createElement("dd");
		
		var txt1=document.createTextNode(key);
		var txt2=document.createTextNode(defs[key]);

		dtitle.appendChild(txt1);
		ddesc.appendChild(txt2);
		
		dlist.appendChild(dtitle);
		dlist.appendChild(ddesc);
	}

	var header=document.createElement("h2");;
	var txt=document.createTextNode("Abbreviations");
	header.appendChild(txt);
	
	document.body.appendChild(header);
	document.body.appendChild(dlist);

}

（1）应该给函数设置检验，检验浏览器是否兼容：

if(!document.getElementsByTagName) return false;
if(!document.createElement) return false;
if(!document.createTextNode) return false;

（2）使用defs数组存储关键值是为了练习key in的历遍方法，完全可以不用数组。另外，取出节点中的文本节点值有两种常用的方法：
一种是使用HTML的方法仅对HTML标记有效，另外一种则是用lastChild.nodeValue：

var key=abbreviations[i].innerHTML;//取出文本节点
var key=abbreviations[i].lastChild.nodeValue;//取出文本节点

（3）在过去的IE浏览器中，拒绝承认abbr的元素地位，abbr标签不收到支持。为了保证平稳退化，我们要在displayAbbreviations添加新的语句，当abbr不被承认是一个元素时，IE返回错误的子节点数目：0

for(var i=0;i<abbreviations.length;i++)
{
	if(abbreviations[i].childNodes.length<1) continue;//没有子节点
	var definition=abbreviations[i].getAttribute("title");//取出title属性
	//var key=abbreviations[i].lastChild.nodeValue;//取出文本节点
	var key=abbreviations[i].innerHTML;//取出文本节点
	defs[key]=definition;//存入数组
}

最后是Abbreviations列表：
充实文档——略缩语列表 文献来源链接 快捷键清单

2. 创建文献来源链接表

对于以下的引用块，我们将cite的来源显示的展示出来，设定一个displayCitations函数，创建文献来源链接表，并将这个链接追加成blockquote元的最后后一个子节点

	<blockquote cite="http://www.w3.org/DOM/">
		<p>
			A platfrom- and language-neutral interface that will allow programs
			and scripts to dynamically access and update the content, structure and style of documents.			
		</p>
	</blockquote>

（1）这个函数将完成如下步骤：

  • 历遍blockquote元素
  • 取出blockquote[i]的cite的属性值
  • 创建一个超链接，标识文本为source
  • 把这个链接赋值为cite
  • 把这个链接插入到文献节选的末尾
function displayCitation()
{
	if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;
	var quotes=document.getElementsByTagName("blockquote");
	for(var i=0;i<quotes.length;i++)
	{
		if(!quotes[i].getAttribute("cite")) continue;
		var url=quotes[i].getAttribute("cite");//取出属性值
		var quoteChildren=quotes[i].getElementsByTagName("*");//通配符返回所有子元素节点
		if(quoteChildren.length<1) continue;
		var elem=quoteChildren[quoteChildren.length-1];//取得最后一个元素节点
		var link=document.createElement("a");
		var txt=document.createTextNode("source");
		link.appendChild(txt);
		link.setAttribute("href",url);
		var superscript=document.createElement("sup");//用高度的一般来显示
		superscript.appendChild(link);
		//quotes[i].appendChild(superscript);
		elem.appendChild(superscript);
	}
}

如何获取elem的子节点中的最后一个元素节点？

现在我们来讨论一个问题，如何获取elem的子节点中的最后一个元素节点？由于childNodes返回的是elem所有的子节点（元素节点，属性节点，文本节点（最后一个）），所以我们想通过childNodes是无法直接获取最后一个元素节点的，这个时候我们可以遍历整个子节点数组，用nodeType=1判断元素节点：

方法一遍历：

for(var j=quotes[i].childNodes.length-1;j>=0;j--)
{
	if(quotes[i].childNodes[j].nodeType==1) 
	{
		quotes[i].childNodes[j].appendChild(superscript);
		break;
	}
}

方法二通配符*：
对elem查找elem.getElementsByTagName("*"),方法会不管元素名，返回所有的子元素。只要气门取出这个元素数组的最后一个元素节点，就能获取elem的子节点中的最后一个元素节点：

var quoteChildren=quotes[i].getElementsByTagName("*");//通配符返回所有子元素节点
var elem=quoteChildren[quoteChildren.length-1];//取得最后一个元素节点
elem.appendChild(superscript);

注意点：

  • 用quotes[i].appendChild(superscript);这样会直接在quotes[i]末尾加入一个元素节点，会导致换行显示：
    充实文档——略缩语列表 文献来源链接 快捷键清单
  • 用quotes[i].lastChild.parentNode.appendChild(superscript);这样仍然会导致换行显示，因为最后一个子节点并非< p >标签内部的文本，而是< blockquote >标签 的末尾。
    充实文档——略缩语列表 文献来源链接 快捷键清单
  • 这里添加在p标签下，当然可以查找p标签：
quotes[i].getElementsByTagName("p")[0].appendChild(superscript);

最后创文献来源链接表就创建好了：
充实文档——略缩语列表 文献来源链接 快捷键清单

3. 创建快捷键清单

一般来说，在Windows系统里，快捷键是Alt+X ，而在Mac系统里是Ctr+X，网页中的快捷键设置有着约定俗成的设置方法,详情可以参见快捷键设置方法

UK Government Shortcuts
Access key Target
S Skip navigation 跳过导航
1 Home page 返回主页
2 What’s new 返回前一个页面
3 Site map 网站导航
4 Search 打开本网页的搜索界面
5 FAQ 常见问题解答s
6 Help 帮助
7 Complaints procedure 投诉程序
8 Terms and conditions 条件和协议
9 Feedback form 本网站联系办法链接
0 Access key details 查看本网站的快捷清单

在HTML标记中写入一个连接列表

<ul>
	<li><a href="index.html" accesskey="1">Home</a></li>
	<li><a href="search.html" accesskey="4">Search</a></li>
	<li><a href="contact.html" accesskey="0">Contact</a></li>
</ul>

根据这个html标记创建快捷键清单：

function displayAccessKeys()
{
	if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;
	 var links=document.getElementsByTagName("a");//获取a集合
	 var akeys=new Array();
	 for(var i=0;i<links.length;i++)
	 {
	 	if(!links[i].getAttribute("accesskey")) continue;
	 	akeys[links[i].getAttribute("accesskey")]=links[i].lastChild.nodeValue;//存入数组
	 }

	 var ulist=document.createElement("ul");
	 for(key in akeys)
	 {
	 	var txt=key+":"+akeys[key];
	 	var list=document.createElement("li");
	 	var ltxt=document.createTextNode(txt);
	 	list.appendChild(ltxt);
	 	ulist.appendChild(list);//追加到ulist上
	 }
	 var header=document.createElement("h2");
	 var txt=document.createTextNode("Accesskeys");
	 header.appendChild(txt);
	 header.appendChild(ulist);
	 document.body.appendChild(header);
}

最后文档充实就完成了：
充实文档——略缩语列表 文献来源链接 快捷键清单

相关标签： Web前端开发框架

上一篇： php使用gettimeofday函数返回当前时间并存放在关联数组里

下一篇： AngularJS向后端ASP.NET API控制器上传文件

推荐阅读