DOM编程艺术学习（二）_html whicpic-CSDN博客

本文链接：https://blog.csdn.net/yeahaimaing/article/details/51386854

JavaScript图片库

使用JavaScript与DOM建立一个图片库。为提高速度，为每张图分别创建一个网页，把整个图片库的浏览链接集中安排在图片库主页里，只有当用户点击了这个主页里的某个图片链接时才把相应的图片传送给他。

标记

使用<ul>创建一个链接清单，标记需要展示的图片链接。使用“占位符图片”，当点击某个链接时，图片会出现在当前页面的占位符图片上。使用id属性，使可以通过一个外部的样式表对图片的显示位置和显示效果加以控制。

JavaScript

想要把“占位符”图片替换为想要查看的图片，则需要改变其src属性。使用setAttribute方法。

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

将文件保存为showPic.js文件，在HTML文件里引用这个文件。

<script type="text/jscript" src="showPic.js"></script>

事件处理函数

当用户点击图片链接时，触发showPic事件。而showPic()的参数whicpic是一个带有href属性的元素节点参数，使用this关键字，指“这个对象”，在此例中，表示“这个<a>元素节点”。

此外，使用οnclick="showPic(this);"，当点击链接时，不仅showPic会被调用，链接被点击的默认行为也会被调用，即用户还是会被带到图片查看窗口。

事件处理函数的工作机制：在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的代码可以返回一个值，这个值将被传递给事件处理函数。例如给某链接添加onclik事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。当链接被点击时，如果那段JavaScript代码返回的值是true，onclick事件处理函数则认为“这个链接被点击了”。

为防止用户被带到目标链接窗口，要加上一条return false语句。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<script type="text/jscript" src="showPic.js"></script>
</head>

<body>
<h1>Image gallery</h1>
<ul>
  <li> <a href="1.jpg" onClick="showPic(this);return false;" title="people">people</a> </li>
  <li> <a href="2.jpg" onClick="showPic(this);return false;" title="tree">tree</a> </li>
  <li> <a href="3.png" onClick="showPic(this);return false;" title="hourse">hourse</a> </li>
</ul>
<img id="placeholder" src="1.jpg" alt="my image gallery" />
</body>
</html>

扩展

目的：在要同一个网页上切换显示不同的文本。

childNodes属性

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

element.childNodes

例：检索某文档中body元素的全体子元素。先使用getElementsByTagName得到body元素。因为每份文档只有一个body元素，所以它将是getElementsByTagName("body")方法返回的数组中的第一个元素。当body_element指向body元素，使用childNodes获取body元素的全体子元素。将这个小函数添加到showPic.js中，当页面加载时，会弹出窗口，显示body元素子元素的个数。

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

}
window.οnlοad=countBodyChildren;

nodeType属性

使用nodeType获取具体节点。

alert(body_element.nodeType);

但是返回的不是英文而是数值。

元素节点 1

属性节点 2

文本节点 3

在标记中增加一段描述

为增强图片库函数，决定维护一个文本节点，在显示图片时，把这个文本节点的值替换为目标图片链接的title的值。首先，为目标文本安排显示位置。

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

将代码加在<ima>标签后，设置一个独一无二的id值。

想要达到的效果：在某个图片链接被点击时，不仅要把“占位符”图片替换为那个链接的href属性所指向的图片，还有把这段文本同时替换为那个图片链接的title属性值。

对showPic函数的修改：

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("decription");//创建一个新的变量来方便引用id为description的文本段落
	
}

实现文本切换

node.nodeValue用来得到和设定一个节点的值。返回元素本身的值为一个空值，要返回的是元素所包含的文本的值。

如：

alert(description.childNodes[0].nodevalue);

node.firstChild与node.childNodes[0]等价。

node.childNodes[node.childNodes.length-1]与node.lastChild等价。

利用NodeValue属性刷新描述：

description.firstChild.nodeValue=text;