用javascript来充实文档的内容-优快云博客

本文介绍了一种使用JavaScript操作DOM的方法，包括动态展示缩写定义、引用来源及访问键说明等功能。通过addLoadEvent函数简化了页面加载事件的处理，并提供了针对不同浏览器兼容性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image</title>
<style rel="stylesheet" type="text/css">
<!--
body{
	background:#666;
	margin:0 0 0 20px;
	padding:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
}

a:link,a:hover,a:visited,a:active{
	color:#ffffff;
	font-size:10px;
}
-->
</style>

<script language="javascript" type="text/javascript">

function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
		window.onload = func;
	}
	else {
		window.onload = function(){
			oldonload();
			func();
		}
	}
}

function displayAbbreviations(){
	if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
	var abbreviations = document.getElementsByTagName("abbr");
	if (abbreviations.length < 1) return false;
	var defs = new Array();
	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;
	}
	var dlist = document.createElement("dl");
	for (key in defs){
		var definition = defs[key];
		var dtitle = document.createElement("dt");
		var dtitle_text = document.createTextNode(key);
		dtitle.appendChild(dtitle_text);
		var ddesc = document.createElement("dd");
		var ddesc_text = document.createTextNode(definition);
		ddesc.appendChild(ddesc_text);
		dlist.appendChild(dtitle);
		dlist.appendChild(ddesc);
	}
	if (dlist.childNodes.length<1) return false;
	var header = document.createElement("h2");
	var header_text = document.createTextNode("Abbreviations");
	header.appendChild(header_text);
	document.body.appendChild(header);
	document.body.appendChild(dlist);
}

function displayCitations(){
	if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
	var quotes = document.getElementsByTagName("blockquote");
	for (var i=0;i<quotes.length;i++){
		if(!quotes[i].getAttribute("cite")) continue;
		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);
	}
}

function displayAccesskeys(){
	if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
	var links = document.getElementsByTagName("a");
	var akeys = 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");
		var text = current_link.lastChild.nodeValue;
		akeys[key] = text;
	}
	var list = document.createElement("ul");
	for (key in akeys){
		var text = akeys[key];
		var  str = key + ": "+text;
		var item = document.createElement("li");
		var item_text = document.createTextNode(str);
		item.appendChild(item_text);
		list.appendChild(item);
	}
	var header = document.createElement("h3");
	var header_text = document.createTextNode("Accesskeys");
	header.appendChild(header_text);
	document.body.appendChild(header);
	document.body.appendChild(list);
}

addLoadEvent(displayAbbreviations);
addLoadEvent(displayCitations);
addLoadEvent(displayAccesskeys);

</script>
</head>
<body>
	<ul id="navigation">
		<li><a href="index.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> defines the <abbr title="Document Object Model">DOM</abbr> as:</p>
	<blockquote cite="http://www.w3.org/DOM/">
		<p>A plateform- 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="extensible Markup Language">XML</abbr> documents.</p>
</body>
</html>

一：addLoadEvent()函数非常实用，尤其是在代码变得复杂的时候。无论在页面加载完成时执行多少个函数，都只要多写一条语句就可以了。

addLoadEvent()函数的思路主要分3步：

1.把现有的window.onload事件处理函数的值存入变量oldonload。

2.如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它。

3.如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾。

二：在displayAbbreviations()；displayCitations()；displayAccesskeys()这三个函数的开头部分，我都安排了一些测试，测试下面我用到的getElementsByTagName（）；createElement（）；createTextNode（）方法，以确保浏览器能够正确理解我在这些函数里用到的DOM方法。用下面这个语句就能检测：

if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;

或者写成：

if (!document.getElementsByTagName) return false;

if (!document.createElement) return false;

if (!document.createTextNode) return false;

这两种写法没有本质区别，你可以根据自己的个人习惯加以选择。

虽然绝大多数浏览器都能或多或少地支持javascript，而且对DOM的支持都非常不错。但比较古老的浏览器确很可能无法理解DOM提供的方法和属性。虽然只是条简单的if语句，但它可以确保那些古老的浏览器不会因为我写的脚本代码而出错。

三：因为IE浏览器在统计abbr元素的子节点个数时总会“正确地”返回一个错误的值：0，所以

if (current_abbr.childNodes.length<1) continue;

这条语句会让IE浏览器不再继续执行这个循环中的后续代码。这条语句的含义是：“如果当前元素没有子节点，就立刻开始下一次循环。”

四：巧妙的用for循环。

for循环的独特之处是，它可以把某个数组的下标临时地付给一个变量。

比如：for（variable in array）

在for循环进入第一次循环时，变量variable将被赋值为数组array的第一个元素的下标值；在进入第二次循环时，变量variable将被赋值为数组array的第二个元素的下标值；依次类推...直到遍历完数组array里的所有元素位置。

在上面的例子displayAbbreviations()函数里：在第一次循环时，变量key的值是“W3C”，变量definition的值是“World Wide Web Consortium”；在第二次循环是，变量key的值是“DOM”，变量definition的值是“Document Object Model”；...。