JavaScript之充实文档的内容
1、我们在平时的开发中会碰到一些缩略语如:XML,HTML,API等专业术语;为了能使用户,更好的了解术语的意思,我们通常会给<abbr></abbr>标签加一个title属性来放术语的全称,但是有些浏览器可能不会显示title属性,所以我们通过JS来动态的加载并显示缩略语和他的全称。代码如下:
js代码:
window.onload=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;//标签的文本值当key
var 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 the
content,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 reallink
var from = quotes[i].getAttribute("title") == "" ? "" : "from "+quotes[i].getAttribute("title"); //get the origin of the document
var link = document.createElement("a");
link.setAttribute("href", cite); //set href to a
var 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 the
content,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 the
content,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 compatibility
var 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 key
var text = current_link.firstChild.nodeValue; //get the description
keys[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之充实文档的内容的更多相关文章
- 《DOM Scripting》学习笔记-——第八章 充实文档的内容
本章内容 一.一个为文档创建“缩略词语表”的函数 二.一个为文档创建“文献来源链接”的函数 三.一个为文档创建“快速访问键清单”的函数 利用DOM动态的收集和创建一些有用的辅助信息,并把它们呈现在网页 ...
- DOM学习之充实文档内容
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...
- C# 给Word文档添加内容控件
C# 给Word文档添加内容控件 在MS Word中,我们可以通过内容控件来向word文档中插入预先定义好的模块,指定模块的内容格式(如图片.日期.列表或格式化的文本等),从而创建一个结构化的word ...
- 将Word文档发给别人时如何限制别人只能修改文档部分内容
将Word文档发给别人时如何限制别人只能修改文档部分内容 转自:互联网.时间:2014-04-16 作者:snow 来源:互联网 在很多情况下我们都不希望别人修改我们的文档内容,特别实在将W ...
- JavaScript中的文档模式和严格模式
JavaScript中的文档模式和严格模式 语法模式有普通模式和严格模式两种 普通模式:正常的JavaScript语法拼写以及代码编写(相对于严格模式存在着语法上的不严谨),尽可能的识别错误以及不规范 ...
- JavaScript 放置在文档最后面可以使页面加载速度更快
JavaScript 放置在文档最后面可以使页面加载速度更快
- C#提取TXT文档指定内容
早上有分享一篇<VB.NET提取TXT文档指定内容> http://www.cnblogs.com/insus/p/3267347.html 那是原网友的需求用VB.NET写的.刚才有只懂 ...
- 编写Java程序,在硬盘中选取一个 txt 文件,读取该文档的内容后,追加一段文字“[ 来自新华社 ]”,保存到一个新的 txt 文件内
查看本章节 查看作业目录 需求说明: 在硬盘中选取一个 txt 文件,读取该文档的内容后,追加一段文字"[ 来自新华社 ]",保存到一个新的 txt 文件内 实现思路: 创建 Sa ...
- 【Javascript DOM读书笔记】chapter8 充实文档内容
本章目的 作者举出了第一个实例,为一篇 web 页面动态创建缩略语(abbreviation)的列表.大家知道,我们可以使用 <abbr>...</abbr> 来指示一个缩略语 ...
随机推荐
- poj3094---对字符串的处理
#include <stdio.h> #include <stdlib.h> #include<string.h> int main() { ]; int len, ...
- mongodb use db show dbs
mongodb 常用命令: 在dbs间切换用 use xxxdb 之后再操作就是只针对 xxxdb了: show dbs显示全部数据库 show collections 显示全部集合 mongodb数 ...
- wikioi-1039-数的划分
将整数n分成k份,且每份不能为空,任意两种划分方案不能相同(不考虑顺序). dp[i][j]:把数i分成k分的方案数 则:dp[i][j]=sum(dp[i-j][t])(t>=1&&a ...
- android 计时器,倒计时
自己定义CountDownTimer /** * 计时器 * @author Administrator * */ class TimeCount extends CountDownTimer{ pu ...
- TCP协议三次握手过程分析
TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种标 ...
- CodeSmith exclude global 文件和文件夹问题 与 输入中文显示乱码问题
1.打开C:/Documents and Settings/你的用户名/Application Data/CodeSmith/v4.1/CodeSmithGui.config文件. 2.在<te ...
- SharePoint2010 Form验证配置流程
1.修改管理中心的Web.config文件,位置:C:\inetpub\wwwroot\wss\VirtualDirectories\42903 2.修改应用程序的Web.config文件,位置:C: ...
- Android API在不同版本系统上的兼容性
随着安卓版本的不断更新,新的API不断涌出,有时候高版本的API会在低版本crash的. 如果minSdkVersion设置过低,在build的时候,就会报错(Call requires API le ...
- java.util.Random 类的 nextInt(int num )
随机产生3个67~295的整数并找出数值居中的数 并输出中间的数例如:100,225和200,输出200 要随机产生某个范围内的整数,用 java.util.Random 类的 nextInt(int ...
- linux使用工具记录
linux工具查询手册: http://linuxtools-rst.readthedocs.io/zh_CN/latest/index.html