关闭

JavaScript DOM编程艺术—显示“缩略语列表”

标签: javascript
212人阅读 评论(0) 收藏 举报
分类:

将文档中的<abbr>标签中的title属性集中起来显示在一个页面.

test.html

<!document html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Explaining the Document Object Model</title>
</head>
<body>	
	<h1>what is the Document Object Model?</h1>
<p>
	The <abbr title="world wide webconsortium">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. structures and style of documents.
</p>
</blockquote>
<p>
it is an <abbr title="Application Programming InterFace">API</abbr> that can be used to navigate HTML and XML documents.
</p>
<script type="text/javascript" src="addLoadEvent.js"></script>
<script type="text/javascript" src="displayAbbr.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();
		}
	}
}

displayAbbr.js

addLoadEvent(displayAbbr);
function displayAbbr(){
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	if(!document.createElement) return false;
	 var abbrs = document.getElementsByTagName("abbr");
	// if(abbrs.length < 1) return false;
	 var arr = new Array();
	for(var i=0; i<abbrs.length; i++){
		var abbr = abbrs[i];
		if(abbr.childNodes.length < 1) continue;
		var key = abbr.lastChild.nodeValue;
		var description = abbr.getAttribute("title");
		arr[key] = description;
	}
	//创建定义列表
	var xdl = document.createElement("dl");
	for(key in arr){
		var xdt = document.createElement("dt");
		var atxt = document.createTextNode(key);
		xdt.appendChild(atxt);
		var xdd = document.createElement("dd");
		var btxt = document.createTextNode(arr[key]);
		xdd.appendChild(btxt);
		xdl.appendChild(xdt);
		xdl.appendChild(xdd);
	}
	 document.body.appendChild(xdl);
}
显示效果:

what is the Document Object Model?

The W3C defines the DOM as:

A platform and language-neutral interface that will allow programs and scripts to dynamically access and update the content. structures and style of documents.

it is an API that can be used to navigate HTML and XML documents.

W3C
world wide webconsortium
DOM
Document Object Model
API
Application Programming InterFace


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:299179次
    • 积分:7806
    • 等级:
    • 排名:第2660名
    • 原创:498篇
    • 转载:42篇
    • 译文:3篇
    • 评论:44条
    个性签名
    业精于勤,荒于嬉;行成于思,毁于随。
    最新评论