JavaScript DOM编程艺术(第二版) 第八章最终代码

转载 2017年09月13日 20:21:43

html代码:

<html>
<head>
    <meta charset = "utf-8">
    <title>Explaning the DOM</title>
	<style type="text/css">
		abbr{
			text-decoration:none;
		}
	</style>
</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 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 Programing Interface">API</abbr> that can be used to navigate <abbr title="Hyper Text 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>
	<script src="scripts/displayAccesskeys.js"></script>
</body>
</html>

Jsp函数:displayCitations.js

function displayAbbreviations(){
	if(!document.getElementsByTagName) return false;
	if(!document.createElement) return false;
	if(!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 head_text = document.createTextNode("Abbreviations");
	header.appendChild(head_text);
	document.body.appendChild(header);
	document.body.appendChild(dlist);
}
function displayCitations(){
	if(!document.getElementsByTagName) return false;
	if(!document.createElement) return false;
	if(!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 = document.getElementsByTagName("*");
		if(quoteChildren.length < 1){
			continue;
		}
		var elem = quoteChildren[quoteChildren.length-1];
		var _link = document.createElement("a");
		var link_text = document.createTextNode("source");
		_link.setAttribute("href",url);
		_link.appendChild(link_text);
		var supscript = document.createElement("sup");
		supscript.appendChild(_link);
		elem.appendChild(supscript);
	}
}

addLoadEvent(displayAbbreviations);
Jsp函数:displayCitations.js

function displayCitations(){
	
	if(!document.getElementsByTagName) return false;
	if(!document.createElement) return false;
	if(!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.setAttribute("href",url);
		_link.appendChild(link_text);
		var supscript = document.createElement("sup");
		supscript.appendChild(_link);
		elem.appendChild(supscript);
	}
}
addLoadEvent(displayCitations);

Jsp函数:displayAccesskeys.js

function displayAccesskeys(){
	
	if(!document.getElementsByTagName) return false;
	if(!document.createElement) return false;
	if(!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 tex = current_link.lastChild.nodeValue;
		akeys[key] = tex;
	}
	var list = document.createElement("ul");
	for(key in akeys){
		var tex = akeys[key];
		var str = key + ": " + tex;
		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(displayAccesskeys);
Jsp函数:addLoadEvent.js

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



相关文章推荐

JavaScript_DOM编程艺术第二版学习笔记-第10章

本章内容 动画基础知识 用动画丰富网页的浏览效果 10.1 动画基础知识前面章节介绍了如何利用DOM技术去修改文档的样式信息,选择JS可以节约你的时间和精力,但总的来说,CSS仍是完成这类...
  • sofia92
  • sofia92
  • 2016年01月06日 14:59
  • 556

JavaScript DOM 编程艺术(第二版)7.4 Ajax

Ajax技术的核心就是XMLHttpRequset。这个对象充当着浏览器中的脚本(客户端)与服务器之间的中间人的角色。JavaScript通过这个对象可以自己发送请求,同时自己也响应处理。以下为Aja...

JavaScript_DOM编程艺术第二版学习笔记-第9章

CSS-DOM9.1 style属性语法,element.style.property比如,获取文档的颜色:para.style.color这里,需要注意的是,当获取如:font-family中间有-...
  • sofia92
  • sofia92
  • 2015年12月25日 13:37
  • 645

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

DOM的属性:childNodes、nodeType、nodeValue、nodeName、firstChild、lastChild1、childNodes element.childNodes ...

JavaScript_DOM编程艺术第二版学习笔记-第6章

第5章总结编写JS脚本,需注意,它是否支持平稳退化;渐进增强;向后兼容;分离JavaScript原则。在第五章中,我们已经基本实现了JavaScript与HTML文档的分离,只有onclick事件仍在...
  • sofia92
  • sofia92
  • 2015年12月14日 17:23
  • 210

【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记

经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书。       2015年12月14日,之前使用韩顺平老...

JavaScript_DOM编程艺术第二版学习笔记-第5章

第五章 平稳退化弹出窗口JS使用window对象的open()方法创建新的浏览器窗口,语法:window.open(url,name,features)三个参数是可选的。 参数1是想在新窗口中打开的网...
  • sofia92
  • sofia92
  • 2015年12月03日 15:48
  • 473

JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insert...
  • sofia92
  • sofia92
  • 2015年12月16日 09:20
  • 680

JavaScript_DOM编程艺术第二版 带标签

  • 2016年11月22日 09:34
  • 109.19MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript DOM编程艺术(第二版) 第八章最终代码
举报原因:
原因补充:

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