javaScript 学习笔记 No.3 -- 案例研究-美术馆_案例研究美术馆javas-CSDN博客

本文链接：https://blog.csdn.net/y490884700/article/details/7735691

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>的子节点数
}

调用函数：
上面οnclick="showPic(this);"。使用onclick事件来调用函数。在这里使用另一种事件来驱动函数。在showpic.js中加入

window.οnlοad=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" οnclick="showPic(this);return false;" title="A fireworks display">Fireworks</a>
			</li>
			<li>
				<a href="images/coffee.jpg" οnclick="showPic(this);return false;" title="A cup of black coffee">Coffee</a>
			</li>
			<li>
				<a href="images/rose.jpg" οnclick="showPic(this);return false;" title="A red, red rose">Rose</a>
			</li>
			<li style="float:none;">
				<a href="images/bigben.jpg" οnclick="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.css

body {
    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;
}