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