Javascript的DOM（Document Object Model）指的是HTML文檔中所有元素的集合，可以通過Javascript來操縱這些元素，例如修改元素的文本、樣式、屬性等。DOM中的每個元素都可以看作是一個對象，擁有自己的屬性和方法，通過訪問這些屬性和方法來改變元素的狀態(tài)。以下將通過具體的例子來說明Javascript的DOM是如何工作的。
<!DOCTYPE html>
<html>
<head>
<title>測試頁面</title>
</head>
<body>
<h1>Hello World!</h1>
<p id="content">這是一個測試頁面.</p>
<button onclick="changeText()">點擊這里</button>
</body>
<script>
function changeText() {
document.getElementById("content").innerHTML = "你好，世界！";
}
</script>
</html>在上面的例子中，頁面中有一個按鈕和一個段落元素。當點擊按鈕時，Javascript中的changeText函數(shù)被調(diào)用，文本片段“你好，世界！”被寫入到段落元素中，從而改變了頁面的內(nèi)容。這個例子中使用了getElementById方法來獲取頁面中的段落元素，從而可以在Javascript中訪問和修改這個元素。
DOM除了可以修改文本內(nèi)容外，還可以修改元素的樣式和屬性。例如，可以通過Javascript改變HTML元素的背景色、字體、高度、寬度等樣式屬性，也可以通過Javascript添加、刪除、修改HTML元素的屬性，比如增加一個鏈接、改變圖片的大小、修改表單的值等。以下是一個例子：
<!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="#">這是一個鏈接</a>
<p><button onclick="modifyStyle()">修改樣式</button></p>
<p><button onclick="modifyAttribute()">修改屬性</button></p>
</body>
</html>在上面的例子中，頁面中有一個段落元素、一個圖片元素和一個鏈接元素。當點擊修改樣式的按鈕時，Javascript中的modifyStyle函數(shù)被調(diào)用，文本顏色、字號和背景色被修改，從而改變了元素的外觀。當點擊修改屬性的按鈕時，Javascript中的modifyAttribute函數(shù)被調(diào)用，圖片、鏈接等屬性被修改，從而改變了元素的屬性和行為。這個例子中使用了style和屬性訪問方法來訪問元素的樣式和屬性，從而可以在Javascript中修改這些值。
總之，Javascript的DOM提供了一種方便的方式來操縱HTML文檔中的元素，可以通過訪問這些元素的屬性和方法來改變元素的狀態(tài)、內(nèi)容以及外觀。通過細致地學習和掌握DOM，我們可以輕松地構建出動態(tài)、交互性的Web應用，提供更好的用戶體驗。