DOM编程艺术第八章的实现与问题

程序员文章站 2022-05-06 09:20:07

...

第八章的主要内容是将标记文档中的某些有意义的属性值，如引文链接地址，缩略语的展开单词等内容，显示在页面上。分别用showabbr.js和showcite.js两个文件显示abbr和cite。

上代码

1、content.html

<!DOCTYPE html>
<html>
<head>
	<title>显示缩略语和引文地址</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.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 type="text/javascript" src="addLoadEvent.js"></script>
<script type="text/javascript" src="showabbr.js"></script>
<script type="text/javascript" src="showcite.js"></script>
</body>
</html>

2、showabbr.js（显示缩略词及对应的展开词）

考虑到数组一般以索引值做下标，此处用map结构替代数组

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

	var abbrs = document.getElementsByTagName('abbr');
	if (abbrs.length <1) return false;
	//获取每一个abbr内的title属性值和abbr文本内容，放入到一个map结构中
	var defs = new Map();
	for(var i=0;i<abbrs.length;i++){
		var define = abbrs[i].getAttribute('title');
		var abbr = abbrs[i].firstChild.nodeValue;
		// defs[abbr] = define;
		defs.set(abbr,define);
	}
	//定义列表
	var dl = document.createElement('dl');
	//对于map结构中的每一个键值对，取出来放到dt和dd中,然后追加到dl中
	for(let [abbr,define] of defs.entries()){
		var dt = document.createElement('dt');
		var dt_text = document.createTextNode(abbr);
		dt.appendChild(dt_text);
		var dd = document.createElement('dd');
		var dd_text = document.createTextNode(define);
		dd.appendChild(dd_text);
		dl.appendChild(dt);
		dl.appendChild(dd);
	}
	var head = document.createElement('h2');
	var head_text = document.createTextNode('Abbreviation');
	head.appendChild(head_text);

	document.body.appendChild(head);
	document.body.appendChild(dl);
}
addLoadEvent(showabbr);

3、showcite.js(显示引文链接)

function showcite(){
	if (!document.getElementsByTagName || !document.createTextNode || !document.createElement) return false;
	var quote = document.getElementsByTagName('blockquote');
	if (quote.length < 1) return false;
	for(var i=0;i<quote.length;i++){
		if (!quote[i].getAttribute('cite')) continue;
		var url = quote[i].getAttribute('cite');
		//确定链接的插入位置
		var quoteChilds = quote[i].getElementsByTagName('*');
		if (quoteChilds.length < 1) continue;
		var lastchild = quoteChilds[quoteChilds.length-1];

		var link = document.createElement('a');
		var link_text = document.createTextNode('source');
		link.setAttribute('href',url);
		link.appendChild(link_text);

		var sup = document.createElement('sup');
		sup.appendChild(link);

		lastchild.appendChild(sup);
	}
}
addLoadEvent(showcite);

4、addLoadEvent.js

用于执行函数

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

5、style.css

body{
	font-family: 'Helvetica','Arial',sans-serif;
	font-size: 10pt;
}
abbr{
	text-decoration: none;
	border: 0;
	font-style: normal;
}

DOM编程艺术第八章的实现与问题

DOM编程艺术第八章的实现与问题

《DOM编程艺术》中初步实现的图片库的总结（一）_html/css_WEB-ITnose

《DOM编程艺术》中初步实现的图片库的总结（一）_html/css_WEB-ITnose

DOM编程艺术第八章的实现与问题