《JavaScript DOM编程艺术》整理笔记!

2017-06-14

《JavaScript DOM编程艺术》真是入门js的神书，非常推荐想入门的去看这本书。本篇文章主要是记录自己学习的一些笔记和代码实例。

一、前五章

前五章主要通过DOM和html以及css创建了个能实现基本功能需求的图片库

主要介绍了js的历史，js的基础语法和DOM的操作和一个简单的图片库的案例研究

1.HTML

1.1图片库案例的第一版html代码，没有什么值得注意的地方。很简单。

1 <!DOCTYPE html>
2 <html>
3   <head>
4     <meta charset="utf-8">
5      <title>Image Gallery</title>
6      <link rel="stylesheet" href="layout.css" media="screen">
7      </head>
8   <body>
9     <h1>Snapshots</h1>
10      <ul>
11       <li>
12        <a href="fireworks.png" title="A fireworks display">Fireworks</a>
13       </li>
14       <li>
15        <a href="coffee.png" title="A cup of black coffee">Coffee</a>
16       </li>
17       <li>
18        <a href="rose.png" title="A red,red rose">Rose</a>
19       </li>
20       <li>
21        <a href="bigben.png" title="The famous clock">Big ben</a>
22       </li>
23      </ul>
24    <img id="placeholder" src="avatar.png" alt="my image gallery">
25    <p id="description">Choose an image.</p>
26    <script type="text/javascript" src="showPic.js" >
27    </script>
28  </body>
29  </html>

2.CSS

2.1整篇图片库css代码，这里不对css学习做过多总结，css需要另行总结，只是放出代码。

1 body{
2   font-family:"Helvetica","Arial",serif;
3   color:#333;
4   background-color:#ccc;
5   margin: 1em 10%;
6 }
7 h1{
8   color:#333;
9   background-color:transparent;
10 }
 
11 a:link{color:blue}
12 a:visited{color:black}
13 a:hover{color:red}
14 a:active{color:green}
15 /*css伪类的运用*/
16 /*link表示默认，visited表示访问过后，hover表示经过时，active表示点击时*/
17 a{
18   background-color:transparent;
19   font-weight:bold;
20   text-decoration:none;
21 }
22 ul{
23   padding:0;
24 }
25 li{
26   float:left;
27   padding:1em;
28   list-style:none;
29 }
30 img{
31 display:block;
32 clear:both
33 }

3.JS

3.1showPic函数

1 function showPic(whichpic) {               //whichpic代表一个元素点，指向某个图片的<a>元素
2     var source = whichpic.getAttribute("href"); //获取图片文径地址
3     var placeholder = document.getElementById("placeholder"); //获取占位符图片
4     placeholder.setAttribute("src",source); //第一对src属性进行设置，src的值已经保存在source
5     var text = whichpic.getAttribute("title"); //修改图片下方描述性文字
6     var description = document.getElementById("description");
7     description.firstChild.nodeValue = text; //把description对象第一个节点的nodeValue属性值设置为变       量text的值
8 }

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>
3   <head>
4     <meta charset="utf-8">
5      <title>Image Gallery</title>
6      <link rel="stylesheet" href="layout.css" media="screen">
7      </head>
8   <body>
9     <h1>Snapshots</h1>
10      <ul id="gallerypic"><!--挂钩，方便统一操作图片清单-->
11       <li>
12        <a href="fireworks.png" title="A fireworks display">Fireworks</a>
13       </li>
14       <li>
15        <a href="coffee.png" title="A cup of black coffee">Coffee</a>
16       </li>
17       <li>
18        <a href="rose.png" title="A red,red rose">Rose</a>
19       </li>
20       <li>
21        <a href="bigben.png" title="The famous clock">Big ben</a>
22       </li>
23      </ul>
24    <img id="placeholder" src="avatar.png" alt="my image gallery">
25    <p id="description">Choose an image.</p>
26    <script type="text/javascript" src="showPic.js" >
27    </script>
28  </body>
29  </html>

取消了行内onclick事件并赋予ul一个id以便统一操作ul下的链接，那么我们需要添加事件处理函数

新建函数prepareGallery将有关操作关联到onclick上

函数需要检查浏览器是否理解getElementsByTagName。
函数需要检查浏览器是否理解getElementByID。
函数需要检查当前网页是否存在id为imagegallery的元素
遍历imagegallery元素中的所有链接
设置onclick事件，让他在有关链接被点击时完成一下操作：1，将链接作为参数传给showPic函数；2，取消链接的默认行为不让浏览器打开链接

改版后的js代码新增了prepareGallery函数如下所示：

1 function showPic(whichpic) {               //whichpic代表一个元素点，指向某个图片的<a>元素
2     var source = whichpic.getAttribute("href"); //获取图片文径地址
3     var placeholder = document.getElementById("placeholder"); //获取占位符图片
4     placeholder.setAttribute("src",source); //第一对src属性进行设置，src的值已经保存在source
5     var text = whichpic.getAttribute("title"); //修改图片下方描述性文字
6     var description = document.getElementById("description");
7     description.firstChild.nodeValue = text; /*把description对象第一个节点的nodeValue属性值设置为*/ 9   //变量text的值
10   }
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.onload = function() {
43      oldonload();
44      func();
45    }
46  }
47 }
48 addLoadEvent(prepareGallery)

最后的实际效果如下，点击不同的菜单会有相应的变化：

Image Gallery