JS DOM 编程艺术(第2版)读书笔记 第4章 案例研究：JavaScript 图片库
相关知识点：
元素子节点：
element.childNodes //返回所有类型的了节点，不包括孙子节点
// object Text
// object HTMLHeadingElement
// object HTMLUListElement
// object HTMLImageElement
// object HTMLParagraphElement
// object HTMLScriptElement
节点类型： node.nodeType
元素节点 1
属性节点 2
文本节点 3
节点的值：
element.nodeValue // 貌似只有文本节点有值，元素节点返回null或undefined
第一个子节点：
element.firstChild //返回所有类型的了节点，包括文本节点 属性节点 元素节点
最后一个子节点：
element.lastChild //返回所有类型的了节点，包括文本节点 属性节点 元素节点
直接看代码：
1 <!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 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>图片库</title>
6 <style type="text/css">
7 *{margin:0;padding:0;}
8 body{background:#CCC;margin:1em 10%;}
9 img{width:300px;height:300px;display:block;}
10 ul{overflow:hidden;}
11 li{float:left;list-style:none;padding:0 5px;}
12 </style>
13 </head>
14 <body>
15
16 <h1>photo</h1>
17 <ul>
18 <li><a href="images/Koala.jpg" onclick="showPic(this);return false;" title="Koala">Koala</a></li>
19 <li><a href="images/Desert.jpg" onclick="showPic(this);return false;" title="Desert">Desert</a></li>
20 <li><a href="images/Tulips.jpg" onclick="showPic(this);return false;" title="Tulips">Tulips</a></li>
21 <li><a href="images/Lighthouse.jpg" onclick="showPic(this);return false;" title="Lighthouse">Lighthouse</a></li>
22 </ul>
23
24 <img id="placeholder" src="images/Desert.jpg" alt="" />
25
26 <p id="description">Choose an image.</p>
27
28 <script type="text/javascript">
29 function G(s) {
30 return document.getElementById(s);
31 }
32 function showPic(obj) {
33 /*
34 * 获得当前对象的href值，如安装有本地服务器：
35 * IE6和IE7返回 "http://localhost/images/Koala.jpg"
36 * 标准浏览器返回 "images/Koala.jpg"
37 * 为了然所有浏览器都返回一致的结果，给getAttribute()添加第二个参数为2.
38 * 谨记：getAttribute("href")和getAttribute("href", 2);浏览器兼容性。
39 */
40 var url = obj.getAttribute("href",2);
41 var place = G("placeholder");
42 place.setAttribute("src", url);
43
44 var text = obj.getAttribute("title");
45 var description = G("description");
46 // firstChild必须存在，也就是说 <p id="description">这里必须有内容</p> 下面这行代码才有效。 其实这种情况常用 description.innerHTML = text;
47 description.firstChild.nodeValue = text;
48 }
49
50 var nodes = document.getElementsByTagName("body")[0].childNodes;
51 for (var i = 0; i < nodes.length; i++) {
52 alert(nodes[i].nodeValue);
53 }
54 alert(nodes.lastChild);
55
56 // object Text
57 // object HTMLHeadingElement
58 // object HTMLUListElement
59 // object HTMLImageElement
60 // object HTMLParagraphElement
61 // object HTMLScriptElement
62 </script>
63
64 </body>
65 </html>
