《JavaScript Dom 编程艺术》读书笔记-第4章

我的前端入门第一本书是《JavaScript Dom 编程艺术》，网上查找资料发现前端的入门推荐书籍最受好评的就是这本和《JavaScript 高级程序设计》了。之所以先选这本是因为这本书从实例开始带领读者一步步学习，写作风格也如其名字一样具有艺术感，阅读起来很舒服。本书第一二三稍微有计算机基础的人阅读起来都不困难，也没有什么好记录的，从第四章开始，本书开始介绍案例图片库~每一节都是干货满满滴~

第四章——案例研究：JavaScript图片库：

4.1 标记

无序清单元素<ul>，有序清单元素<ol>。无序清单元素列出图片库的链接，点击某个链接即可跳转到相应的图片，但图片重新返回到链接清单还需要借助流浪器的Back按钮。

  <ul>
  <li>
  <a href="image/1.jpg" title="1" >1 </a>
  </li>
  <li>
  <a href="image/2.jpg" title="2" >2 </a>
  </li>
  <li>
  <a href="image/3.jpg" title="3" >3 </a>
  </li>
  </ul>
  

希望改进：

1. 当点击某个链接时，留在这个页面而不是转到另一个窗口。

2. 当点击这个链接时，希望同时看到那张图片以及原有的图片清单。

做法：

1. 增加“占位符”图片在主页上为浏览器预留一个浏览区域；

 <img id="placeholder" src="data:image/1.jpg" alt="my image gallery"/> //将这行代码插到图片清单的末尾

2. 点击这个链接时，拦截这个浏览器的默认行为

3. 点击某个链接时，将“占位符”图片替换为相对应的图片

//做法2.3 用下一节介绍JavaScript函数实现

4.2 JavaScript

要实现上面的做法2.3，可以通过 showPic 函数修改占位符图片的src属性。

function showPic(whichpic){//whichPic 代表一个元素节点，指向某个图片的<a>元素。
var source=whichpic.getAttribute("href"); //获取图片的文件路径
var placehold=document.getElementById("placeholder"); //获取“占位符”图片
placehold.setAttribute("src",source);// 刷新占位符的src属性 

 }

setAttribute 是第一级DOM的组成部分，可以设置任意元素节点的任意属性。也可以用placehold.src=source来代替。

placehold.src=source;// 刷新占位符的src属性 

4.3 应用这个JavaScript 函数

将上面的JavaScript程序保存在example.js文件中。

在图片库的HTML文件的</body>中插入：

<script type="text/javascri pt" src="example.js"></script>

然后在图片列表的链接添加行为，也就是事件处理函数（在特定事件发生时调用特定的JavaScript代码，例：onmouseover，onmouseout，onclick，onkeypress）。

<a href="image/1.jpg" onclick="showPic(this);return false" title="1" >1 </a> // return false表示取消链接被点击时的默认行为

4.4 对这个函数做扩展

childNodes属性：获得任意元素的所有子元素。

childNodes.length：获取子元素的个数。

nodeType：获取节点的属性。共有12中可取值，仅三种具有实用价值。元素节点的nodeType值，1；属性节点，2；文本节点，3。

nodeValue：获取节点的值。

 // 在“占位符”图片下面添加图片描述
<img id="placeholder" src="data:image/1.jpg" alt="my image gallery"/>
 <p id="describe"> choose an image</p> 

将“占位符”图片下面添加图片描述修改为点击图片的描述：

//在JS中修改“choose an image”的方式是：
var des=document.getElementById("describe");
des.childNodes[0].nodeValue=whichpic.getAttribute("title");

firstChild 和 lastChild：元素的第一个子元素和最后一个元素。

des.childNodes[0].nodeValue=whichpic.getAttribute("title");
//可以修改为：
des.firstChild.nodeValue=whichpic.getAttribute("title");

到目前为止完整的JS代码清单：

function showPic(whichpic){
var source=whichpic.getAttribute("href");
var placehold=document.getElementById("placeholder");
placehold.setAttribute("src",source);
var des=document.getElementById("describe");
des.firstChild.nodeValue=whichpic.getAttribute("title");
}

4.5 小结

DOM的几个新属性：

childNodes：获得任意元素的所有子元素。

nodeType：获取节点的属性。共有12中可取值，仅三种具有实用价值。元素节点的nodeType值，1；属性节点，2；文本节点，3。

nodeValue：获取节点的值。

firstChild 和 lastChild：元素的第一个子元素和最后一个元素。

重点：

利用DOM提供的方法编写图片库脚本和用事件处理函数把JavaScript代码与网页集成到一起。