javascript 美术馆

  1. childNodes属性 从给定的节点树把任何一个元素的所有子元素检索出来,返回一个数组
function countBodyChildren(){
var body_element=document.getElementsByTagName("body")[0];//检索到body
alert(body_element.childNodes);//检索到body的所有子元素
alert(body_element.childNodes.length);//查看包含的元素的个数
} 

在页面加载时执行函数 window.οnlοad=countBodyChildren;
2. nodeType 调用语法 node.nodeType
alert(body_element.nodeType);//输出每个节点的属性
元素节点的属性值是1;属性节点的属性值为2;文本节点的属性值为3.
3. nodeValue 可以用来改变某个文本节点的值

Choose an image.

alert(description.childNode[0].nodeValue);
4. firstChild 和lastChild
firstChild与childNodes[0]完全等价

//点击图片时,在指定位置显示图片后,在描述区显示图片的标题

Choose an image.

function showtitle(whichpic) { var text=whichpic.getAttribute("title"); var description=document.getElementById("description"); description.firstChild.nodeValue=text; }

5.整个小页面的源码
pic.html

<html>
<head>
<title>Image Gallerytitle>
<script type="text/javascript" src="showPic.js">script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen">
head>
<body>
<h1>Snapshotsh1>
<ul>
    <li><a href="image/1.jpg" onClick="showPic(this); return false;" title="a fireworks display">fireworks     a>//鼠标点击时,不在另一个页面显示,而是在显示区域显示。点击返回false,则不会跳转
    li>
    <li><a href="image/2.png" onClick="showPic(this); return false;" title="a cup of black coffee">coffeea>
    li>
    <li><a href="image/3.png" onClick="showPic(this); return false;" title="a red rose">rosea>
    li>
    <li><a href="image/4.png" onClick="showPic(this); return false;" title="the famous clock">bigbena>
    li>

ul>
<img id="placeholder" src="image/4.png" alt="my image gallery" />
//点击图片时,在指定位置显示图片后,在描述区显示图片的标题
<p id=”description”>Choose an image.p>
body>
html>

layout.css

/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
color:#00CCCC;
background-color:#CC3300;
margin:1em 10%;
}
h1{
color:#CC3366;
background-color:#CCCC99;
}
a{
color:#CCCC99;
background-color:#3366FF;
font-weight:bold;
text-decoration:none;
}
ul{
padding:0;
}
li{
float:left;
padding:1em;
list-style:none;
}

showPic.js

function showPic(whichpic)
{  var source=whichpic.getAttribute("href");//首先检索到图片的地址
    var placeholder=document.getElementById("placeholder");//找到被替换图片的位置
    placeholder.setAttribute("src",source);//替换  另一种方法 placeholder.src=source;
    var text=whichpic.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;
}// JavaScript Document

你可能感兴趣的:(JavaScript)