本章所涉及的一些知識(shí)點(diǎn)：
setAttribute getAttribute this onclick
childNodes nodeType nodeValue firstChild lastChild
為這些圖片創(chuàng)建一個(gè)鏈接清單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="styles/layout.css" media="screen">
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images\takako-wind.jpg" onclick="showPic(this);return false"; title = "wind">Wind</a>
</li>
<li>
<a href="images\takako-purple.jpg" onclick="showPic(this);return false"; title = "purple">purple</a>
</li>
<li>
<a href="images\takako-olive.jpg" onclick="showPic(this);return false"; title = "olive">olive</a>
</li>
<li>
<a href="images\takako-red.jpg" onclick="showPic(this);return false"; title = "red">red</a>
</li>
</ul>
//占位符
<p id="description">Choose an image.</p>
<script type="text/javascript" src = "scripts/showPic.js"></script>
</body>
</html>
為了把“占位符”圖片替換為想要查看的圖片，需要改變其src屬性瓜贾。
function show(whicpic)
whichpic代表著一個(gè)元素節(jié)點(diǎn)暂殖，更具體地說(shuō)，是一個(gè)指向某個(gè)圖片的<a>元素
whichpic.getAttribute("href")
把這個(gè)路徑存入變量source
var source = whichpic.getAttribute("href")
獲取占位符圖片
var placeholder = document.getElementById("placeholder")
placeholder.setAttribute("src" , source)
function showPic(whichpic) { //修改占位符圖片
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
事件處理函數(shù)的作用是镣煮，在特定事件發(fā)生時(shí)調(diào)用特定的javascript代碼释簿。
showpic（）函數(shù)需要一個(gè)帶有href屬性的元素節(jié)點(diǎn)參數(shù)弦聂，
使用this關(guān)鍵詞谐丢，表示“這個(gè)<a>元素節(jié)點(diǎn)”
onclick = "showpic(this) ; return false"
在onclick事件處理函數(shù)所觸發(fā)的Javascript代碼返回給它false的值，即這個(gè)鏈接的默認(rèn)行為沒(méi)有被觸發(fā)
<li>
<a href="images\takako-wind.jpg" onclick="showPic(this);return false"; title = "wind">Wind</a>
</li>
<li>
<a href="images\takako-purple.jpg" onclick="showPic(this);return false"; title = "purple">purple</a>
</li>
<li>
<a href="images\takako-olive.jpg" onclick="showPic(this);return false"; title = "olive">olive</a>
</li>
<li>
<a href="images\takako-red.jpg" onclick="showPic(this);return false"; title = "red">red</a>
</li>
在一顆節(jié)點(diǎn)樹(shù)上其监，childNodes屬性可以用來(lái)獲取任何一個(gè)元素的所有子元素萌腿，是一個(gè)包含這個(gè)元素全部子元素的數(shù)組。elements.childNodes
function countBodyChild(){
var body_element = document.getElementsByTagName("body")[0]
alert(body_element.childNodes.length)
alert(body_element.nodeType)
window.onload = countBodyChild
childNodes[0] = firstChild
這里[0]是body的第一個(gè)元素抖苦，整篇html也且只有一個(gè)用[0]是獲取body元素毁菱，不用的話只是獲取一個(gè)空的數(shù)組
元素節(jié)點(diǎn)的nodeType屬性值是1
屬性節(jié)點(diǎn)的nodeType屬性值是2
文本節(jié)點(diǎn)的nodeType屬性值是3
在圖片鏈接被點(diǎn)擊時(shí)，為了能動(dòng)態(tài)地用圖片的title替換掉圖片說(shuō)明锌历，需要對(duì)showpic（）做修改
獲取whichpic對(duì)象的title屬性值
var text = whichpic.getAttribute("title")
var description = document.getElementById("description")
想改變一個(gè)文本節(jié)點(diǎn)的值贮庞，可以使用DOM提供的nodeValue屬性
假如你使用description.nodeValue，將會(huì)返回一個(gè)null值究西，<p>元素本身的nodeValue屬性是一個(gè)空值
真正需要的是<p>元素說(shuō)包含的文本的值
description.childNodes[0].nodeValue
nodeValue屬性的用途不僅可以用來(lái)檢索節(jié)點(diǎn)的值窗慎，還可以用來(lái)設(shè)置節(jié)點(diǎn)的值。
var description = document.getElementById("description")
description.firstChild.nodeValue = text```
添加一些css樣式后卤材，一個(gè)較為美觀的JS圖片庫(kù)就做出來(lái)了遮斥。
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;
}
ul{
padding: 0;
}
li{
float: left;
padding:1em;
list-style: none;
}
img{
display: block;
clear:both
}
