JavaScript/DOM

HTML文档在被浏览器加载时就被解析为一棵抽象的树，这棵树就是文档对象模型（DOM），它的根节点在Javascript中表示为document。HTML文档中的每一个标签、每一段文字以及每一个注释都是DOM树的子节点。

访问临近节点

可以用firstChild()、lastChild()和childNodes()访问任何一个节点的子节点

查找特定节点

可以用getElementsByName()、getElementsByClass()和getElementsByTagName()访问任何一个节点的子节点

例：查找特定节点并中序遍历其子节点

例：错在哪里？

某网站托管了一组网页文件，其结构如下：

/
  index.html
  index.js
  images/
    dog.png
    cat.jpg
    elephant.tif

index.html：

<html>
<head>
<script src="/index.js"></script>
</head>
<body>
<image id="selected" src="cat.jpg" />
<button onclick="change('images/cat.jpg')">点我选猫</button>
<button onclick="change('images/dog.png')">点我选狗</button>
<button onclick="change('images/elephant.tif')">点我选大象</button>
</body>
</html>

index.js：

var imageNode = document.getElementById('selected');
function change(target){
  imageNode.src=target
}

点击页面上的三个按钮后，发现显示的图片没有变化，为什么？