版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54862407
事件处理函数:
1.onmouseover鼠标进入
2.onmouseout鼠标移出
3.onclick鼠标点击
用法：
<a href=”src” onmouseover=”showPic(this); return false;” title=”0001” >0001</a>
表示当鼠标进入时执行showPic函数，参数是本身这个对象。执行完所有函数后返回false，因为一般情况下，点击一个链接会打开一个新的页面。而当onmouseover返回false时，就会认为没有被点击，所以不会打开新的页面。
childNodes 属性
获取一个元素的所有子元素，他是一个包含所有子元素的数组。
elements.childNodes
nodeType属性
获取body节点的属性类型：*body[0].nodeType*
| 节点类型 | 属性值 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
nodeValue获取属性的内容
获取p节点的内容：
var p = document.getElementsByTagName("p");
alert(p[0].firstChild.nodeValue);内容是一个文本节点，他是p节点的一个子节点，所以直接用p.nodeValue并不可以获取文本内容，而是用p.firstChild获取他的子节点的内容。
firstChild/lastChild 第一个子节点/最后一个子节点
运用以上知识完成的一个小项目：
效果图如下： 
源码如下：
<!--HTML部分-->
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="CSS/photos.css"/>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="http://i1.piimg.com/584041/a46e945e0fa0f2b4.jpg" onmouseover="showPic(this); return false;" title="0001" >0001</a>
</li>
<li>
<a href="http://i1.piimg.com/584041/2b6a7e646d94a6a2.jpg" onmouseover="showPic(this); return false;" title="0002">0002</a>
</li>
<li>
<a href="http://i1.piimg.com/584041/60be391e7c6a7f4f.jpg" onmouseover="showPic(this); return false;" title="0003">0003</a>
</li>
<li>
<a href="http://i1.piimg.com/584041/9130f7450dab0a15.jpg" onmouseover="showPic(this); return false;" title="0004">0004</a>
</li>
</ul>
<img id="placeholder" src="http://i1.piimg.com/584041/2b6a7e646d94a6a2.jpg" title="placeholder" wodth="400" height = 300/>
<p id="description">Choose a image </p>
<script type="text/javascript" src="JS/photos.js" ></script>
</body>
</html>//JavaScript部分
function showPic(whichpic){
var sourse = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",sourse);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = "This is image :"+text;
}/*css部分*/
*{
padding:0;
margin:0;
}
body{
font-family: "helvetica","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;
}
li{
list-style:none;
display:inline-block;
margin:1em;
margin-top:2em;
}
img{
display:block;
clear:both;
}
p{
margin-top:1em;
font-size:18px;
font--weight:bold;
}
