《JavaScript DOM编程艺术》真是入门js的神书，非常推荐想入门的去看这本书。本篇文章主要是记录自己学习的一些笔记和代码实例。
一、前五章
前五章主要通过DOM和html以及css创建了个能实现基本功能需求的图片库
主要介绍了js的历史，js的基础语法和DOM的操作和一个简单的图片库的案例研究
1.HTML
1.1图片库案例的第一版html代码，没有什么值得注意的地方。很简单。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="william">
<meta name="Keywords" content="dom code art">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<script src="js/showPic.js"></script>
<title>图片库</title>
</head>
<body>
<h1>Photos<h1>
<ul>
<li><a href="images/1.jpg" title="菊花" οnclick="showPic(this);return false;">第一张</a></li>
<li><a href="images/2.jpg" title="沙漠" οnclick="showPic(this);return false;">第二张</a></li>
<li><a href="images/3.jpg" title="八仙花" οnclick="showPic(this);return false;">第三张</a></li>
<li><a href="images/4.jpg" title="灯塔" οnclick="showPic(this);return false;">第四张</a></li>
</ul>
<img id="zhanweifu" src="images/zhanwei.jpg" alt="占位"/>
<p id ="description">选择一张照片</p>
</body>
</html>2.CSS
2.1整篇图片库css代码，这里不对css学习做过多总结，css需要另行总结，只是放出代码
body{
font-family:"Helvetica","Arial",serif;
color:#333;
background-color:#ccc;
margin: 1em 10%;
}
h1{
color:#333;
background-color:transparent;
}
a:link{color:blue}
a:visited{color:black}
a:hover{color:red}
a:active{color:green}
/*css伪类的运用*/
/*link表示默认，visited表示访问过后，hover表示经过时，active表示点击时*/
a{
background-color:transparent;
font-weight:bold;
text-decoration:none;
}
ul{
padding:0;
}
li{
float:left;
padding:1em;
list-style:none;
}
img{
display:block;
clear:both
}
3.JS
3.1showPic函数
1 function showPic(whichPic){ //whichPic是形参，看具体调用的地方
2 //修改占位符图片
3 var source = whichPic.getAttribute("href");
4 var place = document.getElementById("zhanweifu");
5 place.setAttribute("src",source);
6 //修改照片下方描述性文字
7 var text = whichPic.getAttribute("title")
8 var txt = document.getElementById("description");
9 //alert(txt.firstChild.nodeValue)//firstChild等价于childNodes[0]并且更加直观 于firstChild对应的还有个lastChild表示childNodes数组的最后一个元素
10 txt.firstChild.nodeValue = text ;
11 }
a.这里接触到了getAttribute()和setAttribute()；前者获取元素属性，后者可以获取并修改元素属性值
b.childNodes nodeType和nodeValue三个属性
childNodes属性可以获取任何有一个元素的所有子元素，它是一个包含这个元素所有子元素的数组；如我想获取body元素的所有子元素
1 var body_element = document.getElementsByTagName("body")[0];//这里[0]是body的第一个元素整篇html也且只有一个用[0]是获取body元素，不用的话只是获取一个空的数组
2
nodeType 获取元素节点语法结构：node.nodeTye如alert(body_element.nodeType )会显示1；
一般js中只有3种具有实用价值的nodeType属性：元素节点的属性值是1；属性节点的属性值是2；文本节点的属性值是3。
nodeValue 用来改变文本节点的值，它用来得到（或设置）一个节点的值，语法结构：node.nodeValue如p[0].nodeValue这里p是元素但是想要获取文本，那么包含在p元素里面的文本节点是另一种节点，如果想要得到内容那么肯定要求p的第一个子节点的nodeValue，★当然第一个也可以用firstChild也表示 p[0]和p.firstChild是等价的
那么以上这些可以实现一个简单的图片库效果，但是还是存在很多不规范的地方，比如是否支持平稳退化、结构和样式是否分离、是否向后兼容？性能考虑，压缩脚本等都可以考虑进来更好的完善图片库。
==========================我是分割线=================================================================
学习第五章之后，有了图片库改进版。第五章主要强调平稳退化，结构样式分离，向后兼容，性能考虑等最佳实践
1.改进版HTML代码
<!--第一版本代码；1、支持平稳退化，即如果浏览器禁用了js，那么用户依然能够访问这些图片而不是404只是体验有所下降-->
<!--第一版本代码；2、js代码和html标记未分离，js onclick还在行间，那么使得js和a标签分离需要一个“挂钩”，此时我们给整个ul清单设置一个专有id如 id="gallerypic"-->
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="Author" content="william">
6 <meta name="Keywords" content="dom code art">
7 <meta name="Description" content="">
8 <link rel="stylesheet" type="text/css" href="css/layout.css">
9 <script src="js/showPic.js"></script>
10 <title>图片库</title>
11 </head>
12 <body>
13 <!--第二版V2.0 改进点：使得HTML标记和JavaScript代码进行分离-->
14
15 <h1>Photos<h1>
16 <ul id="gallerypic"><!--挂钩，方便统一操作图片清单-->
17 <li><a href="images/1.jpg" title="菊花" >第一张</a></li>
18 <li><a href="images/2.jpg" title="沙漠" >第二张</a></li>
19 <li><a href="images/3.jpg" title="八仙花">第三张</a></li>
20 <li><a href="images/4.jpg" title="灯塔" >第四张</a></li>
21 </ul>
22 <img id="zhanweifu" src="images/zhanwei.jpg" alt="占位"/>
23 <p id ="description">选择一张照片</p>
24 </body>
25 </html>
取消了行内onclick事件并赋予ul一个id以便统一操作ul下的链接，那么我们需要添加事件处理函数
新建函数prepareGallery将有关操作关联到onclick上
- 函数需要检查浏览器是否理解getElementsByTagName。
- 函数需要检查浏览器是否理解getElementByID。
- 函数需要检查当前网页是否存在id为imagegallery的元素
- 遍历imagegallery元素中的所有链接
- 设置onclick事件，让他在有关链接被点击时完成一下操作：1，将链接作为参数传给showPic函数；2，取消链接的默认行为不让浏览器打开链接
改版后的js代码新增了prepareGallery函数如下所示：
1 function showPic(whichPic){ //whichPic是形参，看具体调用的地方
2 //修改占位符图片
3 var source = whichPic.getAttribute("href");
4 var place = document.getElementById("zhanweifu");
5 place.setAttribute("src",source);
6 //修改照片下方描述性文字
7 var text = whichPic.getAttribute("title")
8 var txt = document.getElementById("description");
9 //alert(txt.firstChild.nodeValue)//firstChild等价于childNodes[0]并且更加直观 于firstChild对应的还有个lastChild表示childNodes数组的最后一个元素
10 txt.firstChild.nodeValue = text ;
11 }
12
13
14 //第二版V2.0 分析：如果使得html和js分离 那么我需要把onclick事件与id进行一个绑定需要进行如下代码编写:
15 //1.检查浏览器是否支持getElementsByTagname、getElementByID;
16 //2.判断网页是否存在id="gallerpic"的这样一个元素；
17 //3.遍历gallery元素中的所有链接;
18 //4.设置onclick事件让他在相关链接被点击时，将此链接作为参数传递给showPic并且取消链接被点击时的默认行为不打开新的窗口.
19 function prepareGallery(){
20 if(!document.getElementsByTagName){return false;}
21 if(!document.getElementById){return false;}
22 if(!document.getElementById("gallerypic")){return false;}
23 var gallery=document.getElementById("gallerypic");
24 var links = gallery.getElementsByTagName("a");
25 for(var i = 0;i<links.length;i++){ //for语句条件之间是分号不是逗号 要注意
26 links[i].onclick = function(){
27 showPic(this);return false;
28 }
29 }
30 }
31 //下面是执行这个prepareGallery函数，需要等到页面加载完onload之后，最简单的办法是定义一个匿名函数诸如
32 //window.onload = function(){
33 // firstFunction();
34 // secondFunction();
35 //}
36 //最佳的办法是调用addLoadEvent函数
37 function addLoadEvent(func){
38 var oldonload = window.onload;
39 if(typeof window.onload != 'function'){
40 window.onload = func;
41 }else{
42 window.omload = function(){
43 oldonload();
44 func();
45 }
46 }
47 }
48 addLoadEvent(prepareGallery)
