JavaScript学习笔记2.---JavaScript美术馆

Posted on 2008-06-26 12:43 对月而歌阅读(252) 评论(0) 收藏举报

    利用前面的四个基本方法就可以完成一些简单的任务了.下面利用HavaScruot和Dom建立一个图片库,并称之为JavaScript美术馆.
    几个DOM的新属性:
    1.childNodes
        childNodes属性可以让我们从给顶的文档的节点树里把任何一个元素的所有子元素检索出来,childNodes属性将返回一个数组,这个数组包含给定元素节点的全体子元素:
        element.childNodes
    2.nodeType
        node.nodetype; nodeType总共有12中可取值,其中仅三种有实用值:元素节点,属性节点,文本节点.
    3.nodeValue属性如果想改变某个文本节点的值,那就使用DOM提供的nodeValue属性,他的用途是检索和设置节点的值.
        <p id="description">Choose an image.</P>
         alert(description.nodeValue);
        这个调用将返回一个bull值,<p>元素的nodeValue属性值是一个空值,而我们这里需要的是<p>元素所包含的文本值.包含在<p>元素的文本是另一种节点,它在DOM里四<p>元素的第一个子节点.换句话说,如果想获得<p>元素的文本内容,就必须检索它的第一个子节点的nodeValue的属性值.
        alert(description.childNodes[0].nodeValue);
    下面是一个可运行的"JavaScript美术馆",共分3部分,第一段代码是标记语言文档,第二段是js代码,第三段是CSS样式表
1.标记语言文档   ImageGallery.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml" >
3

<head>
4

<title>ImageGullery</title>
5

</head>
8

<body>
9

<h1>Snapshots</h1>
10

<ul>
11

<li><a href="../DomScripting/images/FireWorks.jpg" title="A fireworls dosplay" onclick="showPic(this);return false;">FireWorls</a></li>
12

<li><a href="../DomScripting/images/Coffee.jpg" title="A Coffee"onclick="showPic(this);return false;">Coffee</a></li>
13

<li><a href="../DomScripting/images/Rose.jpg" title="A Rose "onclick="showPic(this);return false;">Rose</a></li>
14

<li><a href="../DomScripting/images/BigBen.jpg" title="A BigBen "onclick="showPic(this);return false;">BigBen</a></li>
15

</ul>
16

<img id="placeholder" src="../DomScripting/images/BigBen.jpg" alt="my image gallery" />
17

<p id="description">Choose an image.</p>
18

</body>
19

</html>
20

2./scripts/showPic.js

// JScript 文件
2

function showPic(whichpic)
3

{
4

var source = whichpic.getAttribute("href");
5

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

placeholder.setAttribute("src",source);
7

var text = whichpic.getAttribute("title")
8

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

description.firstChild.nodeValue=text;
10

}
11

function countBodyChildren()
12

{
13

var body_element = document.getElementByTagName("Body")[0];
14

alert(body_element.childNodes.length);
15

}
16

3.CSS样式表不贴拉

刷新页面返回顶部

对着月亮唱歌的幸福生活

公告

JavaScript学习笔记2.---JavaScript美术馆