首先先建立一个html文件，建立一个图片库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>学习日记</title>

</head>

<body>

<h1>hello picture</h1>

<ul>

    <li>

    <a href="images/guitar.jpg" title="one guitar">guitar</a>

    </li>

    <li>

    <a href="images/back.jpg" title="boy'back">back</a>

    </li>

    <li>

    <a href="images/hair.jpg" title="girl'hair">hair</a>

    </li>

    <li>

    <a href="images/beautiful.jpg" title="a beautiful girl">beautiful</a>

    </li>

</ul>

<img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />

</body>

</html>

然后写一个函数，用来更换图片，查看图片时，浏览器默认的默认查看行为是在一个新的窗口打开这张图片，而我们的目的是在一个页面实现对图片的更换，所以我们要取消这种默认行为。

代码更改如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>学习日记</title>

</head>

<body>

<h1>hello picture</h1>

<ul>

    <li>

    <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a>

    </li>

    <li>

    <a href="images/back.jpg" title="boy'back" onclick="showpic(this);return false">back</a>

    </li>

    <li>

    <a href="images/hair.jpg" title="girl'hair" onclick="showpic(this);return false">hair</a>

    </li>

    <li>

    <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a>

    </li>

</ul>

<img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />

<script>

function showpic(whichpic){

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

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

    placeholder.setAttribute("src",source);

}

</script>

</body>

</html>

这样即实现了查看图片在同一个页面。

界限来介绍几种常用的属性

1.nodeValue属性：它用来得到或者设置一个节点的值

2.childNodes属性：用来获取一个元素的所有子元素

3.nodeType属性：

元素节点的nodeType属性值是1

属性节点的nodeType属性值是2

文本节点的nodeType属性值是3

4.firstChild属性：相当于childNodes[0]

5.lastChild属性：相当于childNodes[chlidNodes.length-1]

接下来我们运用以上属性来获取图片的描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>学习日记</title>

<style type="text/css">

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;

}

</style>

</head>

<body>

<h1>hello picture</h1>

<ul>

    <li>

    <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a>

    </li>

    <li>

    <a href="images/back.jpg" title="boy'back" onclick="showpic(this);return false">back</a>

    </li>

    <li>

    <a href="images/hair.jpg" title="girl'hair" onclick="showpic(this);return false">hair</a>

    </li>

    <li>

    <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a>

    </li>

</ul>

<img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />

<p id="discription">选择一张图片</p>

<script>

function showpic(whichpic){

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

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

    placeholder.setAttribute("src",source);

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

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

    discription.firstChild.nodeValue=text;

}

</script>

</body>

</html>

为其添加样式，并获取到了图片的详细信息。图片的详细信息就是li元素的title属性，p元素的

firstChild值为“选择一张图片”，是一个文本节点。

javascript dom 编程艺术笔记 第四章：图片库的更多相关文章

  1. javascript dom编程艺术笔记第三章：DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

  2. JavaScript DOM编程艺术 笔记（四）

    DOM document   object model(map) 家谱树---节点树 父 子  兄弟 元素节点  <div> 文本节点  内容 属性节点   value  src getE ...

  3. JavaScript DOM编程艺术 笔记（一）

    探测浏览器品牌版本代码-----浏览器嗅探 代码 JavaScript==ECMAScript java几乎可以部署在任何环境,js只应用于web浏览器 API是一组得到各方面共同认同的基本约定(元素 ...

  4. javascript dom编程艺术笔记之图片库的改进

    dom的操作要遵守的原则 1.平稳退化 2.分离javascript 3.向后兼容 4.性能考虑 改进后的显示图片方法 function showpic(whichpic){ if(!document ...

  5. dom编程艺术笔记2--第三章

    DOM 1.dom:简单理解为文档对象模型<==>节点树 2.宿主对象:浏览器提供的对象—>document对象 3. html标签为树顶点元素 head body为html子元素以 ...

  6. dom编程艺术笔记1--第二章

    第二章语法部分: 1.js注释:<!-- XXXXX 而“-->”这部分js会认为是注释内容的一部分 2.var 声明变量 不用声明变量类型 3.声明使用一个数组语法:var object ...

  7. JavaScript DOM编程艺术 笔记（三）函数

    函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...

  8. JavaScript DOM编程艺术 笔记（二）语句操作

    操作 var total = (1+4)*5; year = year +1; year++; var message = "i am" + "girl"; 是 ...

  9. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. HW5.16

    public class Solution { public static void main(String[] args) { for(int i = 2000; i <= 2010; i++ ...

  2. C# WinForm多线程（三）---- Control.Invoke[转]

    开发中遇到更新Winform中控件假死问题,通过看了这篇文章了解了原理,感谢!此处标记起来,以备查看! 原文地址:http://www.cnblogs.com/joechen/archive/2009 ...

  3. JavaScript- The Good Parts Chapter 4

    Why, every fault’s condemn’d ere it be done:Mine were the very cipher of a function. . .—William Sha ...

  4. Ⅷ.spring的点点滴滴--抽象对象和子对象

    承接上文 抽象对象和子对象 .net篇(环境为vs2012+Spring.Core.dll v1.31) public class parent { public string Name { get; ...

  5. jQuery的DOM操作小案例

    案例一:下拉列表左右选择 <body> <div> <select style="width:60px" multiple size="10 ...

  6. iOS 静态库和动态库

    这两个东西都是编译好的二进制文件.就是用法不同而已.为什么要分为动态和静态两种库呢?先看下图:

  7. 【转】解决Cannot change version of project facet Dynamic web module to 2.5

    http://blog.csdn.net/steveguoshao/article/details/38414145 我们用Eclipse创建Maven结构的web项目的时候选择了Artifact I ...

  8. C# WPF 解压缩7zip文件 带进度条 sevenzipsharp

      vs2013附件 :http://download.csdn.net/detail/u012663700/7427461 C# WPF 解压缩7zip文件 带进度条 sevenzipsharp W ...

  9. WPF柱状图（支持数据库动态更新）之组件的数据动态化

    WPF柱状图(支持数据库动态更新) 在这片文章中我们介绍了如何将柱状图包装成一个组件,将这个组件的属性对外开放和组件的外部属性根内部属性绑定以及非轮询动态更新数据的方式. 非轮询更新数据感觉介绍的不够 ...

  10. How to let gedit of linux display "space"

    gedit--> preference --> check "draw spaces" . Then gedit  will display spaces