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
}

點擊頁面上的三個按鈕後，發現顯示的圖片沒有變化，為什麼？