A JavaScript Image Gallery

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="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>

View Code

/***　　　　　　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;

}

View Code

/***　　　　　　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: 0;
}

li{
    float: left;
    padding: 1em;
    list-style: none;
}

img {
    display: block;
    clear: both;
}

View Code

The structure are like the pic shows below :

posted on 2015-09-09 18:58 beyond_Acm 阅读(181) 评论(0) 编辑收藏举报