JavaScript 充实文档内容
一：简介
使用JavaScript来充实文档内容。主要目的是为现有文档创建一个“缩略语列表”、“文献来源链接”、“快捷键清单”。基本都是前面使用过的函数、没有什么要特别说明的地方。
二：效果图
三：具体内容
HTML的内容的编写可以使用Sublime Text （安装Emmet插件）、或者Jetbrain的Webstorm神器、效率提高N倍。有兴趣的可以百度谷歌Emmet简介。
example.html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Enhancing Content</title>
<link rel="stylesheet" href="../style/example.css" />
<script src="../js/displayAbbreviations.js"></script>
<script src="../js/addLoadEvent.js"></script>
<script src="../js/displayAccessKeys.js"></script>
</head>
<body>
<ul id="navigation">
<li><a href="home.html" accesskey="1">Home</a></li>
<li><a href="Search.html" accesskey="4">Search</a></li>
<li><a href="Contact.html" accesskey="9">Contact</a></li>
</ul>
<h1>What is the Document Object Model?</h1>
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr>
</p>
<blockquote cite="http://www.w3.org/DOM">
<p>
A platform- 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>
displayAbbreviations.js:
/**
* Created by andychen on 2015/1/8.
*/
/**
* Change abbreviations display style.
*/
function displayAbbreviations() {
if (!document.createElement) {return false;}
if (!document.createTextNode) {return false;}
if (!document.getElementsByTagName) {return false;}
var h2 = document.createElement("h2");
var h2Text = document.createTextNode("Abbreviations");
h2.appendChild(h2Text);
var dl = document.createElement("dl");
var abbrArray = document.getElementsByTagName('abbr');
if (abbrArray.length == 0) {return false;}
for (var i = 0; i < abbrArray.length; i++) {
//Continue for loop if abbr is not supported by the current browser.
if (abbrArray[i].childNodes.length < 1) continue;
var abbrTitleNode = document.createTextNode(abbrArray[i].title);
var abbrTextNode = document.createTextNode(abbrArray[i].firstChild.nodeValue);
var dt = document.createElement("dt");
var dd = document.createElement("dd");
dd.appendChild(abbrTitleNode);
dt.appendChild(abbrTextNode);
dl.appendChild(dt);
dl.appendChild(dd);
}
//document.body.appendChild(h2).appendChild(dl);
document.body.appendChild(h2);
document.body.appendChild(dl);
}
displayAccessKeys.js:
/**
* Created by andychen on 2015/1/8.
*/
function displayAccessKeys (){
if (!document.getElementById) {
return false;
}
if (!document.getElementsByTagName) {
return false;
}
if (!document.createElement) {
return false;
}
var ulNode = document.getElementById("navigation");
var aList = ulNode.getElementsByTagName("a");
if (aList.length <= 0) {
return false;
}
var h3 = document.createElement("h3");
var newUl = document.createElement("ul");
for (var i = 0; i < aList.length; i++) {
var current_link = aList[i];
var current_link_value = current_link.lastChild.nodeValue;
var current_link_accesskey = current_link.accessKey;
if (!current_link_accesskey) continue;
var newLi = document.createElement("li");
var str = current_link_accesskey + ":" + current_link_value;
var newALink = document.createElement("a");
newALink.innerText = str;
newALink.href = current_link.href;
newALink.accessKey = current_link_accesskey;
newLi.appendChild(newALink);
newUl.appendChild(newLi);
console.info("accesskey:" + current_link_accesskey)
}
var accessKeyTile = document.createTextNode("AccessKey : ");
h3.appendChild(accessKeyTile);
document.body.appendChild(h3);
document.body.appendChild(newUl);
}
addEvent(displayAccessKeys);
addLoadEvent.js:
/**
* Created by andy on 1/7/2015.
*/
/**
* Multiple execute window.onload;
*/
function addEvent(fun){
var oldFunction = window.onload;
if (!oldFunction) {
window.onload = fun;
} else {
window.onload = function () {
oldFunction();
fun();
}
}
}
addEvent(displayAbbreviations);
example.css:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 10pt;
}
abbr{
text-decoration: none;
}
| 
转播
