跳至內容

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
}

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