《JavaScript DOM编程艺术》笔记：JavaScript图片库 (三)

标记

<!DOCTYPE html>
<html lang = "en">
 <head>
 <meta charset = "utf-8"/>
 <title>Image Callery</title>
 </head>
 <body>
 	<h1>Snapshots</h1>
 	<ul>
 	<li>
 		<a href="image/btn_acomlete_1.png" title="A fireworks display">Firework</a>
 	</li>
 	 <li>
 		<a href="image/btn_acomlete_2.png" title="A cup of tea">tea</a>
 	</li>
  	<li>
 		<a href="image/btn_allcomlete_1.png" title="A red rose">Rose</a>
 	</li>
 	<li>
 		<a href="image/btn_allcomlete_2.png" title="A lalala">Big bar</a>
 	</li> 	
 	</ul>	

 </body>
</html>

通过增加占位符图片的办法在这个主页上为图片预留一个浏览区域。

再点击某个链接的时候，拦截这个网页的默认行为。

再点击某个链接的时候把占位符图片替换为与那个连接相对应的图片。

先在图片清单的末尾插入

 	<img id="placeholder" src="image/img_receive.png" alt="my image gallery" />

Javascript

为了把占位符图片替换成想要查看的图片，需要改变他的src属性。setAttribute是完成这项工作的最佳选择。

首先命名一个函数，用来展示图片，function showPic(whichpic)

whichpic代表一个元素节点，具体地说，那是一个指向某个图片的<a>元素。我需要分解出图片的文件路径，这可以通过在whichpic元素上调用getAttribute得到，只要把href作为参数传递给getAttribute就行了

whichpic。getAttribute("href")

将这个路径存入变量source：

var source = whichpic.getAttribute("href");

扫描二维码关注公众号，回复： 5037684 查看本文章

接下来，还需要获取占位符图片

var placeholder = document.getElementById("plaeholder");

使用setAttribute对placeholder元素的src属性进行刷新。

placeholder.setAttribute("src",source);

非DOM解决方案

setAttribute方法是第一级DOM的组成部分，它可以设置任意元素节点的任意属性。

不使用setAttribute方法也可以改变图片的src属性。

element.value = “the new value";element.setAttribute("value","the new value")；

改变图片的src

placeholder.src = source；

   	function showPic(whichpic){
   		var source = whichpic.getAttribute("href");
   		var placeholder = document.getElementById("placeholder");
   		placeholder.setAttribute("src",source);
   	}

引用javascript函数

在</body>标签之前添加

事件处理函数

事件处理函数的作用是，在特定事件发生时调用特定的js代码。鼠标悬停调用onmouseover鼠标离开

onmouseout事件，点击事件onclick。

showPic()函数需要一个参数:一个带href属性的元素节点参数。把onclick事件嵌入到一个连接中时，需要把这个链接本身作showPic函数的参数。

使用this关键字。这个关键字在这的含义是这个对象。具体到当前的例子，this表示这个<a>元素节点：

showPic(this)

添加事件处理函数语法：

event = "JavaScript statement(s)";

JavaScript代码包含在一对引号之间。我们可以把任意数量的javascript语句放在这对引号之间，用分号隔开。

onclick = "showPic(this)";

只是把处理函数放在图片列表的一个链接中，会出现点击链接是不仅showPic函数被调用，链接被点击的默认行为也会被调用。

函数处理机制:在给某个元素添加了事件处理函数之后，一旦发生事件，相应的js代码就会得到执行。被调用的js代码可以返回一个值，这个值将被传递给那个事件处理函数。例如我们可以给某个链接添加一个onclick函数，并让这个处理函数出发js代码返回true或false，这样一来，当这个链接被点击时，如果那段js代码的返回值是true，onclick事件处理函数就认为这个链接被点击了；反之如果是false，onclick事件处理函数就认为这个连接没有被点击。

<!DOCTYPE html>
<html lang = "en">
 <head>
 <meta charset = "utf-8"/>
 <title>Image Callery</title>
 </head>
 <body>
 	<h1>Snapshots</h1>
 	<ul>
 	<li>
 		<a href="image/btn_acomlete_1.png" onclick="showPic(this);return false;" title="A fireworks display">Firework</a>
 	</li>
 	 <li>
 		<a href="image/btn_acomlete_2.png" onclick="showPic(this);return false;" title="A cup of tea">tea</a>
 	</li>
  	<li>
 		<a href="image/btn_allcomlete_1.png"onclick="showPic(this);return false;" title="A red rose">Rose</a>
 	</li>
 	<li>
 		<a href="image/btn_allcomlete_2.png"onclick="showPic(this);return false;" title="A lalala">Big bar</a>
 	</li> 
 	<img id="placeholder" src="image/img_receive.png" alt="my image gallery" />	
 	</ul>	
   <script>
   	function showPic(whichpic){
   		var source = whichpic.getAttribute("href");
   		var placeholder = document.getElementById("placeholder");
   		placeholder.setAttribute("src",source);
   	}
   </script>
 </body>
</html>

对这个函数进行扩展

图片库里的每个文档都有一个title属性。可以把这个属性取出来并让它和相应的图片一同显示在网页上。title属性的值可以用getAttribute轻而易举地得到。

var text = whichPic.getAttribute("title");

光提取title还不够，我们还需要把它插入到html文档中。为完成这一工作，我们需要用到DOM属性。

childNodes属性

在一棵节点树上,childNodes属性可以获取任何一个元素的所有子元素，他是一个包含这个元素全部子元素的数组：

element.chilldNodes

要获取一个文档的body元素的全体子元素。先使用getElementsByTagName得到body元素，因为每份文档只有一个body元素，所以使用getElementsByTagName（"body"）方法所返回的数组中的第一个也是唯一一个元素：

var body_element = document.getElementsByTagName("body")[0];

现在body_element已经指向了那个文档的body元素。接下来，可以用如下所示的语法获取body元素的全体子元素

body_element.childNodes

把下面的函数添加到代码中

	function countBodyChildren(){
   		var body_element = document.getElementsByTagName("body")[0];
   		alert(body_element.childNodes.length);
   	}

我们需要这个函数在页面加载时执行，而这需要使用onload事件处理函数在后面添加

window.onload = countBodyChildren;

这段代码的作用是页面加载时调用countBodyChildren函数、

nodeType属性

根据此html文档结构body元素应该只有3个子元素，一个hl元素一个ul元素和一个img元素。可是，countBodyChildren（）函数给出来的数字却远大于此，这是因为文档树的节点类型并非只有元素节点一种。

由childNodes属性返回的数组包含所有类型的节点，而不仅仅是元素结点。事实上，文档里几乎每一样东西都是一个节点，甚至连空格和换行都会被解释为节点，而他们也全都包含在childNodes属性所返回的数组中。

因此countBodyChildren的返回结果才会那么大。

还好没一个节点都有nodeType属性，这个属性可以让我们知道自己正与哪一种节点打交道。

node.nodeType//获得节点nodeType属性

alert(body_element.nodeType);

元素节点 nodeType属性值是1.

属性节点 nodeType属性值是2

文本节点 nodeType属性值是3

在标记里增加一段描述

为增加我的图片库函数，我决定委会一个文本节点。我们在显示图片的时候把这个文本节点的值替换成目标图片的链接的title的值。

首先，需要为目标文本安排显示位置。在img标签后新增一个独一无二id值这样就能在js中方便的引用它。

 	<p id="description">Choose an image.</p>

var text = whichpic.getAttribute("title");//获取whichpic对象的title属性并把值存入text

为了方便地引用id为description的文本段落，创建一个新的变量来存放它：

var description = document.getElementById("description");

改完后

   	function showPic(whichpic){
   		var source = whichpic.getAttribute("href");
   		var placeholder = document.getElementById("placeholder");
   		placeholder.setAttribute("src",source);
   		var text = whichpic.getAttribute("title");//获取whichpic对象的title属性并把值存入text
   		var description = document.getElementById("description");

   	}

如果想要改变一个文本节点的值，那就使用DOM提供的nodeValue属性，它用来得到（和设置）一个节点的值：

node.nodeValue

但这里有一个必须注意的细节：在用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。

<p>元素本身的nodeValue属性是一个空值，而你真正需要的是<p>元素所包含的文本的值。

包含在<p>元素里的文本时另一种节点，他是<p>元素的第一个子节点。因此，你想要得到的其实是它的第一个子节点的nodeValue属性值。

description.childNodes[0].nodeValue;

这个调用的返回值才是我们正寻找的Choose an image 这个值来自childNodes数组的第一个元素。

fristChild 和lastChild属性

数组元素childNodes[0]有个更直观易读的同义词。无论何时何地，只要需要访问childNodes数组的第一个元素，都可以把它写成firstChild，

childNodes数组的最后一个元素，如果不想通过lastChild属性去访问这个节点则要使用node.childNodes[node.childNodes.length-1]

利用nodeValue属性刷新这段描述

         var text = whichpic.getAttribute("title");//获取whichpic对象的title属性并把值存入text
         var description = document.getElementById("description");
         description.firstChild.nodeValue = text;

刷新文字。

美化

//css代码
body
{
	font-family: "Helvetice","Arial",serif;
	color: #333;
	background-color: #ccc;
	margin: 1em 10%;
}
h1{
	color: #333;
	background-color: transparent;
}
a{
	color: #c60;
	background-color: :transparent;
	font-weight: bold;
	text-decoration: none;

}
ul{
	padding: 0;
}
li{
	float:left;
	padding: 1em;
	list-style: none;
}
img{
	display: :block;
	clear: both;
}

 <head>
 <meta charset = "utf-8"/>
 <title>Image Callery</title>
 <link rel="stylesheet" href="layout.css" media="screen"/>
 </head>