今天完成的事情：

对昨天完成的函数进行扩展，使其可以在同一个网页上切换显示不同的文本。

利用<a>标签中的title属性，用getAttribute得到这个属性：var text = whichpic.getAttribute("title");

用getElementById来获取将要被替换的<p>：var description = document.getElementById("description");

利用nodeValue属性刷新这段描述：description.firstChild.nodeValue = text;

这里需要注意的是<p>元素本身的nodeValue是一个空值，我们真正需要替换的是它所包含的文本的值，而这个包含的文本是<p>元素的第一个子节点，

但使用childNodes[0]的话语句太冗长，所以用firstChild代替。

下面是最终代码清单：

funtion showPic(whichpic) {

  var source = whichpic.getAttribute("href");

  var placeholder = document.getElementById("placeholder");

  placeholder.setAttribute("src",source);

  var text = whichpic.getAttribute("title");

  var description = document.getElementById("description");

  description.firstchild.nodeValue = text;

}

明天计划的事情： 

完成任务二的设置页面，注意选择人数的进度条和设置身份的按钮

开始写翻身份牌页面，了解页面跳转原理，阅读任务相关攻略

遇到的问题：

今天听了王义山的技术分享，讲解了inline-block元素间的间距和如何消除这些间距，以前只记得给父元素设置font-size: 0;或者是line-height: 0;

今天系统的了解后才知道原来这个间距的产生是因为inline-block元素间的回车或空格，如果把所有元素写在一行里，那间距就会消失，不过这样不方便阅读，所以可以用其他变形方法，比如把前一个标签的闭合写在第二行，和第二个标签的开头挨在一起，或者干脆不写闭合标签，或者用注释符号把前一行的闭合标签和后一行的开头连在一起，都是很灵活的方法，CSS的各种用法真是无穷无尽，学无止境啊。

收获：

平稳退化：让访问者在他们的浏览器不支持js的情况下仍能顺利的浏览你网站。

这将有助于各大搜索引擎的搜索机器人把你的网页添加到搜索引擎的数据库里。

这就要求我们在写代码时预留好退路，即使js被禁用，功能可以打些折扣，但不能彻底失效。

渐进增强:用一些额外的信息层去包裹原始数据。

必须让js代码在HTML文档全部加载到浏览器之后马上开始执行。

这里用到一个HTML文档全部加载完毕时会触发的事件的事件处理函数

window.onload = prepareLinks;

function prepareLinks() {

  var ...

  for ...

}

此外，考虑到访问者可能未启用js功能，并且不同浏览器对js的支持程度也不同，所以要检测浏览器对js的支持程度。

这就是向后兼容。

方法很简单：

if(!getElementById) return false;

if(!getElementByTagName) return false;

虽然只是一条简单的if语句，但可以确保那些古老的浏览器不会因为js代码而出问题，让脚本有良好的向后兼容性。

性能考虑方面，尽量少访问DOM和尽量减少标记，合并和放置脚本，压缩脚本。

函数中如果有重复使用的元素，就把第一次搜索的结果用变量保存起来，之后可以重用，这样搜索DOM的次数将会降低。

而过多的标记数量会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间。