Javascript DOM编程艺术——第4章：案例研究：JavaScript图片库-CSDN博客

本文链接：https://blog.csdn.net/qq_33302076/article/details/102609064

利用Javascript来创建图片库：
把整个图片库的浏览器链接集中安排在图片库主页里，旨在用户点击了这个主页里的某个图片链接时才把相应的图片传送给它

1. 标记

把标记保存到gallery.html中，把图片集中保存在目录image中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Image Gallery</title>
</head>
<body>
	<h1>Snapshots</h1>
	<ul>
		<li>
			<a href="image/1.jpg" title="first image">first image</a>
		</li>
		<li>
			<a href="image/2.jpg" title="second image">second image</a>
		</li>
		<li>
			<a href="image/3.jpg" title="third image">third image</a>
		</li>
		<li>
			<a href="image/4.jpg" title="forth image">forth image</a>
		</li>
	</ul>
</body>
</html>

2.JavaScript

function showPic(whichpic){
	//获得对应的href
	var source = whichpic.getAttribute("href");
	// 获取空白图片的对象
	var blank = document.getElementById("blank");
	//设置空白图片的src属性
	blank.setAttribute("src",source);
		}

将js脚本文件插入到HtML文档的< /body>标签之前

<img id="blank" src="image/blank.jpg" alt="my image gallery"/>
<script type="text/javascript" src="scripts/showPic.js"></script>

3.应用这个JavaScript函数

事件处理函数
Javascript代码包含在一对引号之间，可以把任意数量的JavaScript语句放在这对引号之间，把各语句利用分号隔开。

event = "JavaScript statements"

//使用this关键字，这个关键字的含义是< a>元素节点对象
//返回false，当链接被点击时阻止链接点击的默认行为

<a href="image/1.jpg" title="first image" onclick="showPic(this); return false;">first image</a>

4.对这个函数进行扩展

4.1 childNodes属性
获取任何一个元素的所有子元素：element.childNodes
注意：
childNodes属性返回的数组包含所有类型的节点，而不仅仅是元素节点

//将函数添加到shoePic.js里
function countBodyChildren(){
	var body_element = document.getElementsByTagName("body")[0];
	alert(body_element.childNodes.length);

}
//让函数countBobyChildren在页面加载时执行
//使用onload事件处理函数
window.onload = countBodyChildren;

4.2 nodeType属性
每个节点都有nodeType属性，其值是一个数字，语法是node.nodeType
注：
nodeType属性共有12中可取值，其中

元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3

4.3 nodeValue属性
得到一个文本节点的值，语法是node.nodeValue

//在html中添加放置文本的<p>标签
<p id="description">Choose a image</p>

//找到id为description的节点
var description = document.getElementById("description");
//文本节点是该<p>元素的子结点
alert(description.childNodes[0].nodeValue);

设置节点的值

//获取链接的title属性值
var text = whichpic.getAttribute("title");
//获取id是“description”的<p>元素
var description = document.getElementById("description");
//把description对象的第一个节点的nodeValue属性值设置为变量text的值
description.firstChild.nodeValue = text;

4.4 firstChild属性和lastChild属性
childNodes数组的第一个元素：node.firstChild
childNodes数组的最后一个元素：node.lastChild