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> 来指示一个缩略语 ...

随机推荐

转载文章：Windows Azure 基础结构服务上的 Microsoft Dynamics NAV 和 Microsoft Dynamics GP！
Windows Azure 基础结构服务(虚拟机和虚拟网络)可提供按需基础结构,该基础结构可进行伸缩以适应不断变化的业务需求.无论您是在虚拟机中创建新应用程序,还是运行现有应用程序,我们都将按分钟收费 ...
普林斯顿大学算法课 Algorithm Part I Week 3 求第K大数 Selection
问题给定N个元素的数组,求第k大的数. 特例当k=0时,就是求最大值,当k=N-1时,就是求最小值. 应用顺序统计求top N排行榜基本思想使用快速排序方法中的分区思想,使得a[k]左侧没有更小 ...
wchar_t 、UTF-8、UTF-16的转换方法 - luketty的专栏 - 博客频道 - CSDN.NET
wchar_t .UTF-8.UTF-16的转换方法 - luketty的专栏 - 博客频道 - CSDN.NET wchar_t .UTF-8.UTF-16的转换方法
网易云课堂_C语言程序设计进阶_第二周：指针：取地址运算和指针、使用指针、指针与数组、指针与函数、指针与const、指针运算、动态内存分配_2信号报告
2 信号报告(5分) 题目内容: 无线电台的RS制信号报告是由三两个部分组成的: R(Readability) 信号可辨度即清晰度. S(Strength) 信号强度即大小. 其中R位于报告第一 ...
iOS多线程编程指南（一）关于多线程编程（转）
原文:http://www.dreamingwish.com/article/ios-multi-threaded-programming-a-multi-threaded-programming.h ...
C#编程规范
C#编程规范 Version 1.0 目录第一章概述.... 4 规范制定原则.... 4 术语定义.... 4 Pascal 大小写.... 4 Camel 大小写.... 4 文件命名组织 ...
HTML字符实体（Character Entities），转义字符串（Escape Sequence）【转】
为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...
裸的单调队列-poj-2823-Sliding Window
题目链接: http://poj.org/problem?id=2823 题目意思: 给n个数,求连续区间长度为k的最大和最小值. 解题思路: 裸的单调队列不解释,用两个队列保存. 代码: #incl ...
UVALive 3635 Pie 切糕大师二分
题意:为每个小伙伴切糕,要求每个小盆友(包括你自己)分得的pie一样大,但是每个人只能分得一份pie,不能拿两份凑一起的. 做法:二分查找切糕的大小,然后看看分出来的个数有没有大于小盆友们的个数,它又 ...
Oracle的表连接方式
Oracle的表连接方式: 1.Nl Join连接(嵌套连接) 2.Hash Join(哈希连接) 3.Merge Sort Join(排序合并连接) 各种连接的使用场景: 1. 排序合并连接是偏向于 ...

JavaScript之充实文档的内容

JavaScript之充实文档的内容的更多相关文章

随机推荐

热门专题