JavaScript第四章：对这个函数进行扩展

这一节我们将介绍如何用JavaScript语言和DOM，在同一个网页上切换显示不同的文本。

首先介绍几个新的DOM属性

1.childNodes属性

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

var body_element=document.getElementsByTagName("body")[0];
//文档中的body元素

body_elements.childNodes;
//文档中body元素的子元素

body_elements.childNodes.length;
//文档中body元素的子元素的个数

//想在页面加载执行过程中，显示body元素的子元素
  function countBodyChildren(){
     var body_element=document.getElementsByTagName("body")[0];
     alert(body_element.childNodes.length);
}

//在代码段最末尾添加一句
    window.onload=countBodyChildren;

2.nodeType属性

childNodes包含了所有类型的节点。

每个节点都有nodeType属性。

nodeType属性有12种可取值，但只要3种具有实际价值。

元素节点的nodeType属性值:1

属性节点的nodeType属性值:2

文本节点的nodeType属性值:3

node.nodeType;

3.在标记中增加一段描述

我们决定维护一个文本节点。想在显示图片时，把这个文本节点的值替换成目标图片的链接的title值

我们想达到的效果为：

在图片链接被点击后，同时要把这段文本替换成那个图片链接的title值

//在img标签后添加一段代码
  <p id="description">Choose an image</p>

4.用JavaScript改变这段描述

我们要对showPic函数进行修改：

//在showPic函数中添加两个变量，分别获取图片链接的title值和id为description的元素节点

  var text=whichPic.getAttribute("title");
  var descriptiion=document.getElementById("description");

5.nodeValue属性

nodeValue属性：可以更改文本节点的值。它用来得到节点的值。

上述例子中，<p>的nodeValue属性为null，我们真正需要的是<p>中第一个子节点的nodeValue值。

alert(description.childNodes[0].nodeValue);

6.firstChild和lastChild属性

node.firstNode 等价于 node.ChildNodes[0]
node.lastNode 等价于 node.ChildNodes[node.ChildNodes.length-1]

7.利用nodeValue属性刷新这段描述

我们只需要改变description的<p>元素所包含的文本节点的nodeValue属性值就可以满足上述条件。

function showPic(whichPic){
var source=whichPic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text=whichPic.getAttribute("title");
var description=document.getElementById("description");
description.firstNodo.nodeValue=text;
}

8.最终的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
</head>
<body>
  <h1>SnapChats</h1>
  <ul>
    <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_1.jpg" onclick="showPic(this); return false;" title="JavaScript第三章图片1">Picture 1</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_2.jpg"  onclick="showPic(this); return false;"title="JavaScript第三章图片2">Picture 2</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_3.jpg"  onclick="showPic(this); return false;" title="JavaScript第三章图片3">Picture 3</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_4.jpg"  onclick="showPic(this); return false;" title="JavaScript第三章图片4">Picture 4</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_5.jpg"  onclick="showPic(this); return false;" title="JavaScript第三章图片5">Picture 5</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_6.jpg"  onclick="showPic(this); return false;" title="JavaScript第三章图片6">Picture 6</a>
    </li>
   </ul>
   <p id="description">Choose an image</p>
   <img id="placeholder" src="file:///E|/JavaScript第四章/images/01.jpg" alt="my image gallery"/>
   <script>
   function showPic(whichPic){
	   var source=whichPic.getAttribute("href");
	   var placeholder=document.getElementById("placeholder");
	   placeholder.setAttribute("src",source);
	   var text=whichPic.getAttribute("title");
	   var description=document.getElementById("description");
	   description.firstChild.nodeValue=text;
   }
   </script>
   
</body>
</html>