childNodes property: 
The childNodes property is a way of getting information about the children of any element in a 
document's node tree. It returns an array containing all the children of an element node :
    element.childNodes; 
 
Lets say you wanted to get all the children of the body element.
    var body_element = document.getElementsByTagName("body")[0];
To access the children of the body element, you just need to use :
    body_element.childNodes; 
you may write a function to find out how many elements the body element contains :
 function countBodyChildren() {

       var body_element = document.getElementsByTagName("body")[0] ;

       alert( body_element.childNodes.length );

 }
If you want this function to be excuted when the page loads, you can use the onload event handler
to do this. 
        window.onload = countBodyChildren ;
When the document loads, the countBodyChildren function will be invoked.
 
 
nodeType property :
This will tell us exactly what kind of node we're dealing with. 
The nodeType property is called with the following syntax : 
node.nodeType
instead of returning a string like "element" or "attribute", it returns a number.
There are 12 possible values for nodeType, but only 3 of them are going to be of much practical use:
  • Element nodes have a nodeType value of 1
  • Attribute nodes have a nodeType value of 2
  • Text nodes have a nodeType value of 3
 
 
nodeValue property :
If you want to change the value of a text node, there is a DOM property called nodeValue that can be 
used to get (and set) the value of a node :
node.nodeValue
 
firstChild and lastChild property :
node.firstChild  ==  node.childNodes[0]
node.lastChild   ==  node.childNodes[node.childNodes.length-1]
 
This image gallery projects are as follws :
/***　　　　　　index.html　　　　　　***/
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Image Gallery</title>

    <link rel="stylesheet" href="styles/layout.css" media="screen">

</head>

<body>

    <h1>Snapshiots</h1>

    <ul>

        <li>

            <a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;"> Fireworks </a>

        </li>

        <li>

            <a href="images/coffee.jpg" title="A cup of black coffe" onclick="showPic(this); return false;"> Coffee </a>

        </li>

        <li>

            <a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;"> Rose </a>

        </li>

        <li>

            <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;"> Big Ben </a>

        </li>

    </ul>

    <div id="placeholder">

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

    </div>

    <div id="description">

        <p>Choose an image</p>

    </div>

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

    <script type="application/javascript">

//        alert (description.childNodes.length);

//        window.onload = countBodyChildren;

//var description = document.getElementById("description");

//alert (description.childNodes[2].nodeValue);

    </script>

</body>

</html>

/***　　　　　　showPic.js　　　　　　***/

/**

 * Created by Administrator on 9/9/2015.

 */

/*

    you can use this function to count how many children nodes the body element contains

 */

function countBodyChildren() {

    var body_element = document.getElementsByTagName("body")[0];

    alert(body_element.nodeType);

    alert( body_element.childNodes.length );

}

function showPic(whicPic) {

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

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

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

    var img = placeholder.getElementsByTagName("img")[0];

    img.setAttribute("src", source);

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

    var desc_p = description.getElementsByTagName("p")[0];

    desc_p.firstChild.nodeValue = text;

}

/***　　　　　　layout.css　　　　　　***/

body{

    font-family: "Helvetica", "Arial", serif;

    color: #333;

    background-color: #ccc;

    margin: 1em 10%;

}

h1{

    color: #333;

    /*background-color: #777;*/

}

a{

    color: #c60;

    background-color: transparent;

    font-weight: bold;

    text-decoration: none;

}

ul{

    padding:;

}

li{

    float: left;

    padding: 1em;

    list-style: none;

}

img {

    display: block;

    clear: both;

}

The structure are like the pic shows below :

 
 

A JavaScript Image Gallery的更多相关文章

  1. JavaScript资源大全中文版（Awesome最新版）

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  2. Free Slideshow, Gallery And Lightboxes Scripts

    http://bootstraphelpers.codeplex.com/SourceControl/list/changesets https://github.com/gordon-matt/Bo ...

  3. 35 Gallery – Ajax Slide

    http://html5up.net/overflow (PC,Mobile,Table) http://bridge.net/ https://github.com/bridgedotnet/Bri ...

  4. 2017年最新20个轻量的 JavaScript 库和插件

    下面这个列表中的免费 JavaScript 插件都是今年发布的,没有臃肿的一体化的框架,它们提供轻量级的解决方案,帮助 Web 开发过程更容易和更快.提供的插件可以创建滑块.响应式菜单.模态窗口.相册 ...

  5. mui学习

      改变状态栏的颜色 <meta name="apple-mobile-web-app-capable" content="yes"> <me ...

  6. Github前端项目排名

      Github前端项目排名(2016-04-04) 一.前言 近几年前端技术日新月异,从 RequireJS 到 AngularJS 再到 React,似乎每天都有新的技术诞生.而大神们总能第一时间 ...

  7. 95+强悍的jQuery图形效果插件

    现在的网站越来越离不开图形,好的图像效果能让你的网站增色不少.通过JQuery图形效果插件可以很容易的给你的网站添加一些很酷的效果. 使用JQuery插件其实比想象的要容易很多,效果也超乎想象.在本文 ...

  8. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. 基于FCM的消息推送功能

    需求背景 我方项目需要支持客户端消息推送,iOS终端可以借由苹果本身的apns很方便的实现,但是对于Android来说,必须集成第三方的SDK来处理.考虑到项目需要以及成本,我们选择使用谷歌的FCM框 ...

  2. Java面向对象的练习。动物乐园

    本次项目是:以面向对象的思想设计动物乐园系统. 动物乐园中有猫,狗,鸭子等成员,还可以增加新成员. 猫和鸭子都有自己的名字,都有自己的腿,但腿的条数不同,猫和鸭子会发出叫声,猫的叫声是:喵喵喵……,鸭 ...

  3. 《Head First 设计模式》之命令模式——遥控器

    命令模式(Command) ——将“请求”封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象.命令模式也支持可撤销的操作. 要点 将发出请求的对象和执行请求的对象解耦. 被解耦的两者之间通过 ...

  4. 构建第一个Spring Boot2.0应用之项目创建（一）

     1.开发环境 IDE: JAVA环境: Tomcat: 2.使用Idea生成spring boot项目 以下是使用Idea生成基本的spring boot的步骤. (1)创建工程第一步 (2)创建工 ...

  5. Unity中的输入

    目录 移动平台的输入 触摸 触摸相关的函数 触摸的一个示例 重力加速器 在Unity中访问重力加速器的信息 重力加速器示例 虚拟键盘 其他输入 传统的输入 鼠标,键盘,控制杆,手柄 虚拟控制轴(Vir ...

  6. 微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置（HTML5+jQuery）

    复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示. 图7.1  7.1节文件结构 在location.js中,封装“getLocation”接口,如下: 01 wxJSSD ...

  7. sql队伍的胜负情况

    1.数据显示情况 2.sql语句执行情况 USE [数据库名] GO /****** Object: Table [dbo].[测试] Script Date: 08/03/2017 10:58:02 ...

  8. draggable与overflow同时存在,无法拖拽出父元素问题解决

    在使用jquery-ui的拖拽功能对列表内的选项拖拽时,发现无法将选项拖拽出列表的范围,一出范围就自动隐藏在列表下,查找到最后的原因是css中的overflow的原因,overflow存在则不能将选项 ...

  9. Win 10 Google 云端硬盘 网页证书问题导致无法登录解决办法

    操作方法 按照图示,将以下3项勾去并确定. 效果 设置以后,可成功访问:

  10. MYSQL短索引

    优化MYSQL时,可以尽量使用短索引,如果只是为了提高读取的速度,可以优先使用聚合索引,把几个字段聚集在一起,当然缺点在于操作(写)的时候会降低效率,短索引一般都是开头几个字符基本不同的时候,可以考虑 ...