废话不多说 直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JAVASCRPIT图片的处理</title>
<script type="text/javascript">
function showpic(whichpic){
var source = whichpic.getAttribute("href");
var last = document.getElementById("last");
last.setAttribute("src", source);

var text=whichpic.getAttribute("title");
var decoration=document.getElementById("decoration");
decoration.firstChild.nodeValue=text;

}
</script>
<style type="text/css">
body{margin: 0px; padding: 0px; }
a{text-decoration: none;}
li{list-style-type: none;}
.man{}
.man ul{}
.man ul li{float: left; margin-bottom: 50px;}
.man ul li a{ padding: 0 50px};
.man img{display: block; }
p{font-size: 2em;}
</style>
</head>
<body>
<div class="man">
<h1>javascript图片</h1>
<ul>
<li><a href="images/2.jpg" title="1" onclick="showpic(this); return false;">1</a></li>
<li><a href="images/3.jpg" title="2" onclick="showpic(this); return false;">2</a></li>
<li><a href="images/4.jpg" title="3" onclick="showpic(this); return false;">3</a></li>
<li><a href="images/6.jpg" title="4" onclick="showpic(this); return false;">4</a></li>
</ul>
<div style="clear:both"></div>
<img id="last" src="data:images/1.gif" title="5" >
<p id="decoration">目前这个值是5</p>
</div>

</body>
</html>

思路问题：1：新建一个javascript程序 ，通过getAttribute属性获取图片的路径（href）属性值

通过document.getElementById   占位符 图片的ID，然后根据获取到得找个ID，通过setAttribute的属性来修改占位符图片的位置，从而达到修改图片的目的。就是把li a  标签里面的地址传给占位符  src属性。 从而达到效果

2： 要想修改占位图片下面的P标签里面的文本值。首先  也是通过 getAttribute来  获取 li a  属性里面的title  的值，然后根据  document.getElementById的 方式来获取p 标签的ID值，然后  根据 获取到得P标签的ID值   使用 firstChild.nodeValue的方式  把li  a 的值  付给P标签的ID  从而达到目的

需要注意的属性就是：

getAttribute：我们就可以利用getAttribute()方法把它的各种属性的值查询出来。getAttribute()方法不能通过document对象调用，这与我们此前介绍过的其他方法不同。我们只能通过一个元素节点对象调用它。

setAttribute:setAttribute()方法与它们有一个本质上的区别：它允许我们对属性节点的值做出修改。类似于getAttribute()方法，setAttribute()方法也是一个只能通过元素节点对象调用的函数，但setAttribute()方法需要我们向它传递两个参数：

firstChild.nodeValue:

假设我们已经有一个dom对象，其内容如
内容

在javascript中，我们为了获得title的标签和文本，一般需要这样做
var title =dom.getElementsByTagName(”title”);
alert(title[0].nodeName);//得到“title”
alert(title[0].nodeValue)的时候，FF只能获得#text，而IE只能得到null
后来查了很多资料，object text类型或者object element，本身也是一个结点
上例中“标题”不是一个简单的文本内容，而是一个文本结点
它也有自己的nodeName，只是不该也不会用到
所以应该写成：
alert(title[0].firstChild.nodeValue);//得到“标题”

另一方面，反过来想，生成一个文本的时候，也是用create_text_node方法
还使用了append_child把它添加在一个父结点下
说明它其实是一个结点，需要多使用一次firstChild

javascript+dom 做javascript图片库的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. 《JavaScript Dom 编程艺术》读书笔记-第5章

    上一篇随笔中记录了用JavaScript建一个基础图片库,但实际上还有很多地方可以改进.第五章将逐步进行改进,这一章里需要明白的道理是达到目标的过程和达到目标同样重要~ 第五章:最佳实践 5.1 过去 ...

  3. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

  4. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  5. JavaScript DOM编程艺术（第2版）的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  6. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  7. 高性能JavaScript DOM编程

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用 ...

  8. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  9. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

随机推荐

  1. [C语言 - 8] 枚举enum

    枚举是c语言中得一种基本数据类型,不是数据结构 用于声明一组常数 1. 3中枚举变量的方式 a. 先定义类型, 再定义变量 b. 同时定义类型和变量 c. 匿名定义 enum Season {Spri ...

  2. substr函数

    substr(字符串,截取开始位置,截取长度) //返回截取的字 substr('Hello World',0,1) //返回结果为 'H'  *从字符串第一个字符开始截取长度为1的字符串 subst ...

  3. 做XH2.54杜邦线材料-导线

    好多市场上买的杜邦线质量一般,今天选了一种别的线 线色:红 黑   黄 绿 白 棕 蓝 线规:正标UL1007-24AWG 产品说明:          * UL1007电子连接线   * 线号:24 ...

  4. 电脑蓝屏分析教程，附工具WinDbg(x86 x64)6.12.0002.633下载

    我们常常在使用电脑中,有时会碰到电脑蓝屏,我们经常束手无策,不知道为什么会蓝屏?有些蓝屏后自动重启能正常进入系统,那么我们就可以借助工具进行分析.而有些可能需要进入到安全模式或者pe系统才会正常,那么 ...

  5. 在SQL Server 2014下面使用的SQL2000的Northwind和Pubs示例数据库

    在SQL Server 2014下面使用的SQL2000的Northwind和Pubs示例数据库 http://files.cnblogs.com/files/lxzhangying/SQl2000S ...

  6. pygame简单动态图 & 动态图片的移动

    之前在学pygame 时看了一些博客(来自http://eyehere.net/2011/python-pygame-novice-professional-plant-zombie-1/),觉得写得 ...

  7. C++ 析构方法

    1.什么是析构方法? 析构方法与构造方法互补. 2.为什么设计析构方法? 构造方法创建一个对象,对象内部往往还会申请一些资源.设计析构方法的目的是 释放资源,同时销毁自身. 3.析构方法可以认为分为两 ...

  8. 根据字符串创建FTP本地目录 并按照日期建立子目录返回路径

    /** * 根据字符串创建FTP本地目录 并按照日期建立子目录返回 * @param path * @return */ private String getFolder(String path) { ...

  9. 关于java的JIT知识

    1.JIT的工作原理图  工作原理 当JIT编译启用时(默认是启用的),JVM读入.class文件解释后,将其发给JIT编译器.JIT编译器将字节码编译成本机机器代码. 通常javac将程序源码编译, ...

  10. [转载]Android开发常用调试技术记录

    ANDROID 调试技术: 1)Ps 指令 ls –l /proc/27/ cat /proc/27/cmdline       #cmdline文件表示了这个进程所在的命令行. cat /proc/ ...