我们编写了几个很有用的脚本，你可以把这几个脚本用于任何一个网页里，虽然它们用途不一，但基本思路是相同的：用JavaScript函数先把文档结构里的一些现有信息提取出来，再把那些信息以一种清晰和有意义的方式重新插入到文档里去。
explanation.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Explaining the Document Object Model</title>
<link rel="stylesheet" media="screen" href="styles/typography.css"/>
</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/">
<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>
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/displayAbbreviations.js"></script>
<script src="scripts/displayCitations.js"></script>
</body>
</html>
addLoadEvent.js:
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
diplayAbbreviations.js:
function displayAbbreviations() {
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the abbreviations
var abbreviations = document.getElementsByTagName("abbr");
if (abbreviations.length < 1) return false;
var defs = new Array();
// loop through the abbreviations
for (var i=0; i<abbreviations.length; i++) {
var current_abbr = abbreviations[i];
if (current_abbr.childNodes.length < 1) continue;
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
// create the definition list
var dlist = document.createElement("dl");
// loop through the definitions
for (key in defs) {
var definition = defs[key];
// create the definition title
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
// create the definition description
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
// add them to the definition list
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if (dlist.childNodes.length < 1) return false;
// create a headline
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
// add the headline to the body
document.body.appendChild(header);
// add the definition list to the body
document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);
displayCitations.js:
function displayCitations()
{
if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;
//取得所有引用
var quotes = document.getElementsByTagName("blockquote");
//遍历所有引用
for(var i=0;i<quotes.length;i++)
{
//如果没有cite属性，继续循环
if(!quotes[i].getAttribute("cite")) continue;
//保存cite属性
var url=quotes[i].getAttribute("cite");
//取得引用中的所有元素节点
var quoteChildren=quotes[i].getElementsByTagName('*');
//如果没有元素节点，继续循环
if(quoteChildren.length<1) continue;
//取得引用中的最后一个元素节点
var elem=quoteChildren[quoteChildren.length-1];
//创建标记
var link=document.createElement("a");
var link_text=document.createTextNode("source");
link.appendChild(link_text);
link.setAttribute("href", url);
var superscript=document.createElement("sup");
superscript.appendChild(link);
//把标记添加到引用中的最后一个元素节点
elem.appendChild(superscript);
}
}
addLoadEvent(displayCitations);
我们编写的displayAbbreviations和displayCitations函数有许多共同之处：从创建一个由特定元素（abbr元素或blockquote）构成的节点集合开始，用一个循环去遍历这个节点集合并在每次循环里创建出一些标记，最后把新创建的标记插入到文档里。
希望大家如终记住，JavaScript脚本应该只用来充实文档的内容，要避免使用DOM技术来创建核心内容。
explanation.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Explaining the Document Object Model</title>
<link rel="stylesheet" media="screen" href="styles/typography.css"/>
</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/">
<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>
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/displayAbbreviations.js"></script>
<script src="scripts/displayCitations.js"></script>
</body>
</html>
addLoadEvent.js:
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
diplayAbbreviations.js:
function displayAbbreviations() {
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the abbreviations
var abbreviations = document.getElementsByTagName("abbr");
if (abbreviations.length < 1) return false;
var defs = new Array();
// loop through the abbreviations
for (var i=0; i<abbreviations.length; i++) {
var current_abbr = abbreviations[i];
if (current_abbr.childNodes.length < 1) continue;
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
// create the definition list
var dlist = document.createElement("dl");
// loop through the definitions
for (key in defs) {
var definition = defs[key];
// create the definition title
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
// create the definition description
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
// add them to the definition list
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if (dlist.childNodes.length < 1) return false;
// create a headline
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
// add the headline to the body
document.body.appendChild(header);
// add the definition list to the body
document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);
displayCitations.js:
function displayCitations()
{
if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;
//取得所有引用
var quotes = document.getElementsByTagName("blockquote");
//遍历所有引用
for(var i=0;i<quotes.length;i++)
{
//如果没有cite属性，继续循环
if(!quotes[i].getAttribute("cite")) continue;
//保存cite属性
var url=quotes[i].getAttribute("cite");
//取得引用中的所有元素节点
var quoteChildren=quotes[i].getElementsByTagName('*');
//如果没有元素节点，继续循环
if(quoteChildren.length<1) continue;
//取得引用中的最后一个元素节点
var elem=quoteChildren[quoteChildren.length-1];
//创建标记
var link=document.createElement("a");
var link_text=document.createTextNode("source");
link.appendChild(link_text);
link.setAttribute("href", url);
var superscript=document.createElement("sup");
superscript.appendChild(link);
//把标记添加到引用中的最后一个元素节点
elem.appendChild(superscript);
}
}
addLoadEvent(displayCitations);
1649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
