Javascript的DOM（Document Object Model）指的是HTML文檔中所有元素的集合，可以通過(guò)Javascript來(lái)操縱這些元素，例如修改元素的文本、樣式、屬性等。DOM中的每個(gè)元素都可以看作是一個(gè)對(duì)象，擁有自己的屬性和方法，通過(guò)訪問(wèn)這些屬性和方法來(lái)改變?cè)氐臓顟B(tài)。以下將通過(guò)具體的例子來(lái)說(shuō)明Javascript的DOM是如何工作的。
<!DOCTYPE html>
<html>
<head>
<title>測(cè)試頁(yè)面</title>
</head>
<body>
<h1>Hello World!</h1>
<p id="content">這是一個(gè)測(cè)試頁(yè)面.</p>
<button onclick="changeText()">點(diǎn)擊這里</button>
</body>
<script>
function changeText() {
document.getElementById("content").innerHTML = "你好，世界！";
}
</script>
</html>在上面的例子中，頁(yè)面中有一個(gè)按鈕和一個(gè)段落元素。當(dāng)點(diǎn)擊按鈕時(shí)，Javascript中的changeText函數(shù)被調(diào)用，文本片段“你好，世界！”被寫(xiě)入到段落元素中，從而改變了頁(yè)面的內(nèi)容。這個(gè)例子中使用了getElementById方法來(lái)獲取頁(yè)面中的段落元素，從而可以在Javascript中訪問(wèn)和修改這個(gè)元素。
DOM除了可以修改文本內(nèi)容外，還可以修改元素的樣式和屬性。例如，可以通過(guò)Javascript改變HTML元素的背景色、字體、高度、寬度等樣式屬性，也可以通過(guò)Javascript添加、刪除、修改HTML元素的屬性，比如增加一個(gè)鏈接、改變圖片的大小、修改表單的值等。以下是一個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<title>樣式和屬性的修改</title>
<script>
function modifyStyle() {
document.getElementById("text").style.color = "red";
document.getElementById("text").style.fontSize = "30px";
document.getElementById("text").style.backgroundColor = "lightblue";
}
function modifyAttribute() {
document.getElementById("img1").src = "http://example.com/image2.jpg";
document.getElementById("img1").width = "300";
document.getElementById("link").;
}
</script>
</head>
<body>
<h1>樣式和屬性的修改</h1>
<p id="text">這是一段普通的文本。</p>
<img id="img1" src="http://example.com/image1.jpg" height="200" />
<a id="link" href="#">這是一個(gè)鏈接</a>
<p><button onclick="modifyStyle()">修改樣式</button></p>
<p><button onclick="modifyAttribute()">修改屬性</button></p>
</body>
</html>在上面的例子中，頁(yè)面中有一個(gè)段落元素、一個(gè)圖片元素和一個(gè)鏈接元素。當(dāng)點(diǎn)擊修改樣式的按鈕時(shí)，Javascript中的modifyStyle函數(shù)被調(diào)用，文本顏色、字號(hào)和背景色被修改，從而改變了元素的外觀。當(dāng)點(diǎn)擊修改屬性的按鈕時(shí)，Javascript中的modifyAttribute函數(shù)被調(diào)用，圖片、鏈接等屬性被修改，從而改變了元素的屬性和行為。這個(gè)例子中使用了style和屬性訪問(wèn)方法來(lái)訪問(wèn)元素的樣式和屬性，從而可以在Javascript中修改這些值。
總之，Javascript的DOM提供了一種方便的方式來(lái)操縱HTML文檔中的元素，可以通過(guò)訪問(wèn)這些元素的屬性和方法來(lái)改變?cè)氐臓顟B(tài)、內(nèi)容以及外觀。通過(guò)細(xì)致地學(xué)習(xí)和掌握DOM，我們可以輕松地構(gòu)建出動(dòng)態(tài)、交互性的Web應(yīng)用，提供更好的用戶(hù)體驗(yàn)。