JavaScript之充实文档的内容

1、我们在平时的开发中会碰到一些缩略语如:XML,HTML,API等专业术语；为了能使用户,更好的了解术语的意思,我们通常会给<abbr></abbr>标签加一个title属性来放术语的全称,但是有些浏览器可能不会显示title属性，所以我们通过JS来动态的加载并显示缩略语和他的全称。代码如下：

js代码:

window.οnlοad=displayAbbreviations;
//处理文档中的缩略语,用JS生成一个列表用来显示对应的缩略语的具体含义
//produce a list of Abbreviation by js to deal with the Abbreviation in the document
function displayAbbreviations() {if (!checkCompatibility()) return;   //检查兼容性var abbreviations = document.getElementsByTagName("abbr"); //提取所有的缩略词标签if (abbreviations.length < 1) return false;var defs = new Array();for (var i = 0; i < abbreviations.length; i++) {var key = abbreviations[i].firstChild.nodeValue;//标签的文本值当keyvar definition = abbreviations[i].getAttribute("title"); //标签的title属性值当value;defs[key] = definition;}//创建缩略词展示列表var dllist = document.createElement("dl");for (key in defs) { //创建缩略词标题var dt=document.createElement("dt");var tit = document.createTextNode(key);dt.appendChild(tit);//创建描述var dd = document.createElement("dd");var descri = document.createTextNode(defs[key]);dd.appendChild(descri);dllist.appendChild(dt);dllist.appendChild(dd);}document.getElementsByTagName("body")[0].appendChild(dllist);
}
/*
检查浏览器的兼容性,是否支持查用的DOM方法
check the compatibility of the broswer
*/
function checkCompatibility() {if (!document.getElementById) return false;if (!document.createElement) return false;if (!document.createTextNode) return false;if (!document.getElementsByTagName) return false;if (!document.getElementsByName) return false;return true;
}

html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<h1>What is 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/" title="W3C"><p>A platform- and language-neutral(中立语言) interface that will allows paograms and scripts to dynamically access and update thecontent,structrue and the 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>
</p>
<h1>Abbreviation(缩略语列表)</h1>
</body>
</html>

效果如图:

我们在写博客和文章的经常引用别人的文章,这个时候我们会说明这段文档的出处，我们在开发时亦是如此:这个时候我们可以给我们引用的段落用一个<blockquote></blockquote>包围,然后在里面加一个cite属性(文章出处的链接地址)标明出处,然后通过JS将地址动态的加载到引用段落的最后位置。代码如下:

js代码:

/*
检查浏览器的兼容性,是否支持查用的DOM方法
check the compatibility of the broswer
*/
function checkCompatibility() {if (!document.getElementById) return false;if (!document.createElement) return false;if (!document.createTextNode) return false;if (!document.getElementsByTagName) return false;if (!document.getElementsByName) return false;return true;
}
//文献来源链接表     在引用的文档的末尾添加引用的具体地址
//The literature source list      function:add  specific adress to end of the  reference document
function getLiteratureSourceList() {if (!checkCompatibility()) return;   //检查兼容性if (!document.getElementsByTagName("blockquote")) return false;var quotes =document.getElementsByTagName("blockquote");for (var i = 0; i < quotes.length; i++) {var cite = quotes[i].getAttribute("cite") != "" ? quotes[i].getAttribute("cite") : "javascript:void(0)"; //get reallinkvar from = quotes[i].getAttribute("title") == "" ? "" : "from   "+quotes[i].getAttribute("title");  //get the origin of the documentvar link = document.createElement("a");link.setAttribute("href", cite); //set href to avar txt = document.createTextNode(from);link.appendChild(txt);quotes[i].appendChild(link);}
}
//The literature source list end

html代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script src="js/utility.js" type="text/javascript"></script><script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<h1>What is 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/" title="W3C"><p>A platform- and language-neutral(中立语言) interface that will allows paograms and scripts to dynamically access and update thecontent,structrue and the 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>
</p>
<h1>Abbreviation(缩略语列表)</h1>
</body>
</html>

效果如下:

from w3c 表明了出处,超链接也指向了来源的地方.

在html元素的属性里有一个accseekey属性,这个属性可以把一个元素与键盘上的某个特定按键关联在一起,这对那些不能或不喜欢使用鼠标来浏览网页的人们很有用。对于有视力障碍的人士,键盘快捷方式肯定会带来方便。

注意：设置太多的快捷键往往会适得其反,他们或许可能会与浏览器内建的键盘快捷方式发生冲突。

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script src="js/utility.js" type="text/javascript"></script><script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<ul id="navigation">
<li><a href="javascript:void(0)" accesskey="1">Home</a></li>
<li><a href="javascript:void(0)" accesskey="4">Search</a></li>
<li><a href="javascript:void(0)" accesskey="9">Contact</a></li>
</ul>
<h1>What is 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/" title="W3C"><p>A platform- and language-neutral(中立语言) interface that will allows paograms and scripts to dynamically access and update thecontent,structrue and the 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>
</p>
<h1>Abbreviation(缩略语列表)</h1>
</body>
</html>

js代码：

//展示网页快捷键清单
//display the list of shortcut key
function displayAccessKeys() {if (!checkCompatibility()) return;   //check compatibilityvar links = document.getElementsByTagName("a");var keys = new Array();for (var i = 0; i < links.length; i++) {var current_link = links[i];if (!current_link.getAttribute("accesskey")) continue;var key = current_link.getAttribute("accesskey"); //get the keyvar text = current_link.firstChild.nodeValue;   //get the descriptionkeys[key] = text;}var ul = document.createElement("ul");for (key in keys) {var li = document.createElement("li");var li_txt = key + " : " + keys[key];var item = document.createTextNode(li_txt);li.appendChild(item);ul.appendChild(li);}var tit = document.createElement("h3");var tit_text = document.createTextNode("state of shortcut key(快捷键说明)");tit.appendChild(tit_text);document.getElementsByTagName("body")[0].appendChild(tit);document.getElementsByTagName("body")[0].appendChild(ul);
}
//display the list of shortcut key  end/*
检查浏览器的兼容性,是否支持查用的DOM方法
check the compatibility of the broswer
*/
function checkCompatibility() {if (!document.getElementById) return false;if (!document.createElement) return false;if (!document.createTextNode) return false;if (!document.getElementsByTagName) return false;if (!document.getElementsByName) return false;return true;
}

输出如下:

JavaScript之充实文档的内容相关推荐

JavaScript学习系列6 充实文档的内容
JavaScript 两项基本原则渐进增强:你应该总是从最核心的部分,也就是从内容开始.应该根据内容使用标记实现良好的结构:然后再逐步加强这些内容. 平稳退化:不支持JavaScript也能访问基本 ...
JavaScript读写.txt文档 - 方法篇
JavaScript读写.txt文档:分析与方法详情参考完整教程: Javascript本地写入txt和读取txt文件示例案例篇:求HTML或者JS读取TXT文件内容的代码以上就是关于 &quo ...
javaScript读取txt文档的FSO对象和ADODB.Stream对象
转自:http://blog.163.com/chaosumin@126/blog/static/86387403201092793610651 在使用JavaScript读取txt文档时,一般使用j ...
C#提取TXT文档指定内容
早上有分享一篇<VB.NET提取TXT文档指定内容> http://www.cnblogs.com/insus/p/3267347.html 那是原网友的需求用VB.NET写的. 刚才有只 ...
用Python提取解析pdf文档中内容
用Python提取解析pdf文档中内容文章目录: 参考: 1.https://blog.csdn.net/tmaczt/article/details/82876018 # Tika库 2.http ...
DCMTK：将XML文档的内容转换为DICOM结构的报告文件
DCMTK:将XML文档的内容转换为DICOM结构的报告文件将XML文档的内容转换为DICOM结构的报告文件将XML文档的内容转换为DICOM结构的报告文件 #include "dcmt ...
使用SharePoint 2010新增的文档集内容类型来管理文档
使用SharePoint 2010新增的文档集内容类型来管理文档 SharePoint 2010新增加的文档集功能是作为内容类型存在的,使用范围在网站集中,需要激活"文档集"功能到 ...
如何把word分装到两个byte_如何核对两个Word文档的内容差别？同事加班半小时，我只花了30秒...
昨天下班前,老板突然发了两份Word文档过来,一份是原稿,还有一份是修订稿,叫我们找出两份文档的内容差别之处,我只花了30秒就搞定了,然后准时下班! 你想知道我是怎么操作的吗?下面小源就是告诉你. 不 ...
wms策略文档_内容策略：技术文档的新理念
wms策略文档我们是否可以首先同意文档很重要,而我们想要更好的文档呢? 好. 这样一来,我就不必为为什么要关心而写三段式的报告了,这样您就可以保留更多的时间来阅读它会花费您的时间. 为了生意! 作为 ...

JavaScript之充实文档的内容

JavaScript之充实文档的内容相关推荐

最新文章

热门文章