《JavaScript DOM编程艺术》学习整理
《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="菊花" onclick="showPic(this);return false;">第一张</a></li> <li><a href="images/2.jpg" title="沙漠" onclick="showPic(this);return false;">第二张</a></li> <li><a href="images/3.jpg" title="八仙花" onclick="showPic(this);return false;">第三张</a></li> <li><a href="images/4.jpg" title="灯塔" onclick="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 body_element.childNodes
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)
