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

    
               
           
Snapshiots
    
       
        
        
             Fireworks         
        
        
             Coffee         
        
        
             Rose         
        
        
             Big Ben         
    
       
    
       
        
            
       
    
       
        
        
Choose an image
    
       
        

/***　　　　　　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: 0;}li{
         float: left;    padding: 1em;    list-style: none;}img {
         display: block;    clear: both;}

The structure are like the pic shows below :