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

原创 2015年11月18日 17:07:30

将文档中的<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


版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript DOM 编程艺术学习笔记(一):静态标记

JavaScriptDOM编程艺术学习笔记(一):静态标记对象

JavaScript DOM编程艺术之3-4章知识点总结

getElementByClassName,getAttribute,setAttribute,chiledNodes,nodeType,nodeValue
  • normol
  • normol
  • 2016年10月27日 14:47
  • 177

《JavaScript DOM 编程艺术》读书笔记

《JavaScript DOM 编程艺术》读书笔记——其五第七章1、innerHTML属性使用innerHTML属性,可以把JavaScript代码从标记中分离出来,即不用在标记的部分插入标签。 举例...

《JavaScript DOM 编程艺术》 读书笔记

1.document.getElementById(string)返回的是一个对象,这个对象是怎样的? 2.document.getElementsByTagName(tag)返回的是一个对象数组,...
  • hackooo
  • hackooo
  • 2012年02月19日 16:16
  • 511

【JavaScript DOM编程艺术】- 动态创建标记

用DOM动态的创建HTML文档,以及再次修改图片库。
  • Mluka
  • Mluka
  • 2017年06月06日 17:21
  • 132

javascript之Dom编程艺术二

无标题文档 ...

《JavaScript DOM编程艺术》学习回顾1

前阵子开始学习JavaScript,学到了DOM的时候,便从读书馆借了一本书《JavaScript DOM编程艺术》(第二   版),便开始学习起来,发现这本书讲解的很好,也学到了很多的知识,现在...

JavaScript DOM 编程艺术(第2版)读书笔记(2)

JavaScript 语法 注释         单行注释://         多行注释:/* */         ""多行注释类似,容易混淆,所以不建议这种注释方法 ...
  • meiru8
  • meiru8
  • 2014年12月05日 11:36
  • 308

《Javascript_Dom 编程艺术》(第2版)读书笔记

---Chapter1 Dom : 平稳退化、渐进增强,以用户为中心的设计 ---Chapter 2 1.程序设计语言分为:解释性(javascript)和编译型(java,C++)两大类 2.变...
  • jjting
  • jjting
  • 2014年06月26日 17:54
  • 750

javascript DOM编程艺术 读后感与笔记

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript DOM编程艺术—显示“缩略语列表”
举报原因:
原因补充:

(最多只允许输入30个字)