javaScript 学习笔记 No.3 -- 案例研究-美术馆
childNodes方法:
返回一个数组，包含一个节点的所有子节点的引用
使用方法: element.childNodes
例：查看<body>元素节点的所有子节点
function countBodyChildren (){
var bodyChildren = document.getElementsByTagName('body')[0].childNodes;
//由于HTML中只有一个<body>标签，所以使用getElementsByTagName所得到的数组中的第一个也就是唯一一个元素
//getElementsByTagName('body')[0]就是<body>元素节点的引用
//<body>标签还有一种专用写法：document.body，更加简洁
alert(bodyChildren.length);
//得到<body>的子节点数
}
调用函数：上面onclick="showPic(this);"。使用onclick事件来调用函数。在这里使用另一种事件来驱动函数。在showpic.js中加入
window.onload=countBodyChildren; //window.onload事件：网页加载完毕。 //注意此时countBodyChildren函数后面未加()。什么时候加()？什么时候不加()？ //函数加()的时候分两种：定义时，调用时。其他情况不加，如上式，或者typeof showPic。typeof和nodeType的区别
typeof：javaScript的函数，返回如object，text，number，function等字符串
使用方法：typeof anything
nodeType：学习DOM的时候，知道节点一共有三种，元素节点，属性节点，文本节点。nodeType就是用来得到某个节点是这三种中的哪一种
返回值为：1，2或3。1代表元素节点，2代表属性节点，3代表文本节点
使用方法：element.nodeType
例：用typeof和nodeType来遍历<body>的所以子节点
function bodyChildrenType (){
var bodyChildren = document.body.childNodes;
for (key in bodyChildren){
alert(typeof bodyChildren[key]);
alert(bodyChildren[key].nodeType);
}
}
同样用window.onload事件调用就好了。美术馆例--为图片添加简短描述
首先需要一个描述文本的载体，在<img>标签前加上
<p id="description">Choose an image.</p>然后要将图片链接中的title属性的值取出来放在<p>
function showPic(element){
var source = element.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
//在此函数中加入下面两句
var text = element.getAttribute('title'); //取<a>中title的值
var description = document.getElementById('description');//取<p>元素的引用
}
description是一个元素节点，文本为<p>元素节点的第一个子节点文本节点的值，要取得第一个子节点：description.childNodes[0]或description.firstChild，推荐后者，对应有lastChild备用。
现在还不行，节点和文本是不对等的关系，无法直接赋值，要进行操作，需要节点的另一个属性nodeValue
nodeValue用来检索和设置节点的值。
例：
alert(description.nodeValue);//是一个空值 alert(description.firstChild.nodeValue); //"Choose an image."所以在showPic函数中再加入一句
description.firstChild.nodeValue = text;即可完成对图片的简短描述
加入css
新建一个styles文件夹，一个styles/layout.css文件：
在HTML<head>中加入
<link type="text/css" href="styles/layout.css" rel="stylesheet" />
到目前为止美术馆文件
1.HTML文件 gallery.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Image Gallery</title> <script type="text/javascript" src="scripts/showPic.js"></script> <link type="text/css" href="styles/layout.css" rel="stylesheet" /> </head> <body> <h1>Snapshots</h1> <ul> <li> <a href="images/fireworks.jpg" onclick="showPic(this);return false;" title="A fireworks display">Fireworks</a> </li> <li> <a href="images/coffee.jpg" onclick="showPic(this);return false;" title="A cup of black coffee">Coffee</a> </li> <li> <a href="images/rose.jpg" onclick="showPic(this);return false;" title="A red, red rose">Rose</a> </li> <li style="float:none;"> <a href="images/bigben.jpg" onclick="showPic(this);return false;" title="The famous clock">Big Ben</a> </li> </ul> <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" /> <p id="description">Choose an image</p> </body> </html>2.javaScript文件 showPic.js
function showPic(element){
var source = element.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
var text = element.getAttribute('title');
var description = document.getElementById('description');
description.firstChild.nodeValue = text;
}
3.CSS文件 layout.cssbody {
font-family: "Helvetica", "Arial", sans-serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em; list-style: none;
}