JS出现的一个BUG分析

今天按照JS DOM编程做一个简单的项目。简单来说是通过点击a标签，触发一个JS中的函数，通过DOM方法通过id值找到整个DOM树中的某个元素节点（该document仅有的img标签），然后通过DOM方法去替换该img标签中的资源图片，从而达到点击 -- 图片更换的效果。

BUG描述

当所有部分编写完成时，点击本应该触发更换img标签src属性的函数showPic()函数如下所示：

function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var placehold = document.getElementById("placehold");
    placehold.setAttribute("src",source);
}

然后a标签和img标签如下所示：

<a href="images/fireworks.jpg" onclick="showPic(this);return false;"title="A fireworks display">Fireworks</a>      

<img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />

当然，显而易见showPic()中需要的id值是"placehold",但img标签中的id是"placeholder",也就是说showPic()在执行到这句的时候结束了

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

但是浏览器没有爆任何错误，而是平稳执行下去了。这对网页浏览者来说是一件好事，毕竟因为程序BUG/浏览器兼容性问题，浏览网页可能出现各种各样的问题，过程总不能卡死，“输出错误信息”和“未输出信息”总比直接报错的体验好；而对于开发者，调试的难度就增加了。（这里立个flag，后面学习js调试方法）

讨论下检索不到id，JS到底做了什么

查了一下网上的资料，当getElementbyid()找不到该document中有节点元素有该id的时候，会返回一个非字符串的null。
下面用JS代码测试一下。
按照id检索该文档中的某个DOM节点元素，并保存到变量并输出，代码如下：

function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var placehold = document.getElementById("placeholder");
    alert(placehold.id);
    placehold.setAttribute("src",source);
}

可以根据id检索到元素节点时，浏览器输出[object HTMLImageElement],可以查看其属性。
无法根据id检索到元素节点时，浏览器输出[null]

结尾

算是自己从头到位弄懂了一个小问题吧，感觉写博客这种方法还挺让人印象深刻的。