JavaScript DOM 9.23 (gallery2)

对这个函数进行扩展

图片库里每个图片链接都有一个tittle属性。可以把这个属性取出来并让它和相应的图片一同显示在网页上。tittle属性的值可以用getAttribute轻而易举的得到：

  var text = whichpic.getAttribute("tittle");

光提取tittle属性的值还不够，我们还需要把它插入HTML文档中。我们需要用到几个新的DOM属性。

childNodes属性

childNodes属性可以用来获得任何一个元素的所有子元素，是一个包含这个元素全部子元素的一个数组：

element.childNodes

我们可以查出元素的全体子元素有多少个。因为返回的试一个数组，所以用length属性可以知道它所包含的元素的个数：

element.childNodes.length

在函数内部的alert函数只有在函数被触发的时候才能檀树警示框，在外部的alert会按照顺序执行。如果想这个函数在页面加载的时候被执行，需要用onload事件处理函数：

window.onload = founction()

nodeType属性

这个节点可以让我知道元素的节点类型：

node.nodeType

nodeType返回的值是一个数字不是英文字符串。nodeType属性总共有12个值，但只有三种具有使用价值：

• 元素节点的值为1。
• 属性节点的值为2。
• 文本节点的值为3。

增加一段描述

加一个文本节点，一段文字，在显示图片的时候，把这个文字的值替换成目标文件的tittle的值。

Choose an image.

用js修改showPic函数

增加一条语句来获取whichpic对象的title属性值。存入text变量：

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

接着获取description元素：

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

nodeValue属性

nodeValue用来得到（和设置）一个节点的值：

`node.nodeValue`

注意的是使用description.nodeValue获得的值并不是包含在这个段落里的文本，将返回一个null，因为p元素本身的nodeValue属性是一个空值。

包含在p元素里的文本是另一个节点，是p元素的第一个子节点，所以可以：

description.childNodes[0].nodeValue 

这样获取它的第一个子节点的属性值。

firstChild和lastChild属性：

node.firstChild 等价于 node.childNodes[0]
node.lastChild 等价于 node.childNodes[node.childNodes.length-1]

更加简短而且具有可读性。

使用nodeValue完成

var description = document.getElementById("description");
var text = whichpic.getAttribute("tittle")
description.childNodes[0].nodeValue = text 
//等价于 description.firstchild.nodeValue = text

三行代码含义：

• 当某个图片链接被点击，这个链接的tittle属性值被提取保存到text变量中。
• 得到id为description的元素，保存在变量description中。
• 把description对象的第一个子元素的nodeValue属性值设置为变量text的值。