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编程艺术第二版学习笔记-第7章

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

JS DOM 编程艺术(第2版)读书笔记 第12章 综合示例

/** * addLoadEvent */ function addLoadEvent(func) { var oldonload = window.onload; if(type...
  • trr1994917
  • trr1994917
  • 2015年05月17日 10:37
  • 403

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

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
  • m0_37506557
  • m0_37506557
  • 2017年02月25日 16:30
  • 487

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

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

总结一下这几天学的《JavaScript DOM编程艺术 第2版》(1)

整本书都是关于如何 DOM
  • u013236064
  • u013236064
  • 2014年08月11日 22:38
  • 1287

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

上一章节学会利用DOM方法和属性来动态创建标记,这一章节,我们将继续在实践中利用这些技术。 8.1 不应该做什么理论上,我们可以用JS把一些重要的内容添加到网页上。事实上这是一个坏主意,因为这样一来J...
  • sofia92
  • sofia92
  • 2015年12月18日 09:40
  • 589

javascript dom 编程艺术第十章的一个问题

最近在看《Javascript Dom编程艺术》,在阅读到第十章“用javascript实现动画效果”时遇到一个问题,思考之后记录在此。function moveElement(elementID,f...
  • qq_32600929
  • qq_32600929
  • 2016年11月03日 11:26
  • 533

总结一下这几天学的《JavaScript DOM编程艺术 第2版》(2)

这里介绍第十章的JS DOM内容
  • u013236064
  • u013236064
  • 2014年08月12日 21:54
  • 958

JavaScript DOM编程艺术 学习笔记(六)图片库改进版

图片库这个例子 1。符合平稳退化 Fireworks 即使不支持javaScript 浏览器也会打开href属性给的链接 所以符合了平稳退化 而如果用 即选用...
  • jingqiu880905
  • jingqiu880905
  • 2016年11月08日 17:08
  • 284

JavaScript+DOM编程艺术 第三章 DOM

DOM简介1.HTML DOM:网页被加载时,浏览器会创建文档对象模型 2.DOM操作HTML:改变HTML的元素、属性、CSS样式、对所有事件作出反应DOM操作HTML不要在文档加载完成后使用do...
  • qq_34664510
  • qq_34664510
  • 2017年07月10日 21:34
  • 212
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript DOM编程艺术(第二版) 第八章最终代码
举报原因:
原因补充:

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