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;
}

输出如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JavaEdge

2018-07-161 初识JQuery

进入官方网站获取最新的版本 http://jquery.com/download/ ,这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x,主要...

7610
来自专栏菩提树下的杨过

silverlight如何在运行时用代码动态控制(或创建)动画

silverlight做一些复杂动画时,不可能所有的动画都事先用Blend之类的设计工具"画"好(或者在设计期就在vs里编好),很多时候我们希望在运行时能动态控...

207100
来自专栏HTML5学堂

CSS编码规范

单行形式书写风格的排版约束 1.每一条规则的大括号 { 前后加空格 2.多个selector共用一个样式集,则多个selector必须写成多行形式 3.每一条规...

365150
来自专栏云瓣

从 0 到 1 实现 React 系列 —— JSX 和 Virtual DOM

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/...)

11910
来自专栏Jacklin攻城狮

[UIVIew]谈谈对drawRect的理解

25720
来自专栏从零开始学自动化测试

selenium+python自动化93-鼠标事件(ActionChains)源码详解

ActionChains简介 actionchains是selenium里面专门处理鼠标相关的操作如:鼠标移动,鼠标按钮操作,按键和上下文菜单(鼠标右键)交互。...

40750
来自专栏C/C++基础

Linux命令(27)——echo命令

使用-e选项时,若字符串中出现以下字符,则特别加以处理,而不会将它当成一般文字输出:

14830
来自专栏更流畅、简洁的软件开发方式

表单控件续(1)——应用接口来简化和分散代码

上次有点仓促,有几个地方没有明确。 后者是整个流程,前者是其中的一个步骤,是一个简单的思路说明,其中前三段代码都是表单控件里面的。 2、我要写的是一个表单控...

20590
来自专栏互联网开发者交流社区

最新jquery+easyui_api培训文档

15140
来自专栏xingoo, 一个梦想做发明家的程序员

CListBox

CListBox 一:词条简介 CObject←CCmdTarget←CWnd←CListBox CListBox类提供Windows列表框的功能。列表框显...

19180

扫码关注云+社区

领取腾讯云代金券