當你想要為你的網頁添加動態效果時，Javascript便是必不可少的。而與此同時，DOM(Document Object Model)又是Javascript編程中的一個重要部分。只要掌握了DOM，你便可以隨心所欲地操作HTML元素，改變文本、顏色、樣式，或是添加、刪除、移動和復制元素，以及響應用戶的操作和事件。今天，我們來一起學習Javascript DOM。
Javascript的DOM模型是基于節點樹的形式，每個節點都代表著文檔中的一個對象。最重要的三個節點是文檔(DOM Document)節點、元素(DOM Element)節點和文本(DOM Text)節點。其中元素節點代表著HTML文檔中的標簽和內容，文本節點代表著標簽內的文本內容，而文檔節點代表整個文檔。
// 例如，以下HTML代碼：
<body>
<p>我是一個段落。</p>
</body>
// 在Javascript中，你可以使用以下代碼來獲取元素節點和文本節點
var p = document.getElementsByTagName("p")[0];//獲取元素節點
var text = p.childNodes[0];//獲取文本節點在DOM中，還有另外一個重要的節點：屬性(DOM Attribute)節點。每個元素節點都有一系列的屬性，比如ID、Class、Style等。你可以通過DOM來訪問這些屬性，并在Javascript中改變它們。
// 例如，以下HTML代碼：
<div id="myDiv" class="box">
<p>我是一個段落。</p>
</div>
// 在Javascript中，你可以使用以下代碼來獲取元素節點和屬性節點
var div = document.getElementById("myDiv");//獲取元素節點
var attribute = div.getAttribute("class");//獲取屬性節點當你需要改變節點的屬性或是內容時，你可以使用DOM來完成它們。比如，當你需要改變元素節點的文本內容時，你可以通過修改文本節點來實現它。
// 例如，以下HTML代碼：
<div id="myDiv" class="box">
<p>我是一個段落。</p>
</div>
// 在Javascript中，你可以使用以下代碼來改變元素節點和文本節點的內容
var div = document.getElementById("myDiv");//獲取元素節點
var text = div.getElementsByTagName("p")[0].childNodes[0];//獲取文本節點
text.nodeValue = "我是一段新的文本。";//改變文本節點的內容
div.setAttribute("class", "newClass");//改變元素節點的class屬性最后，Javascript的DOM也可以響應用戶的事件，比如鼠標點擊、滾動、鍵盤輸入等。當用戶發生一個事件時，Javascript便會響應并執行預設的腳本代碼。為了實現它，你需要先通過DOM來獲取元素節點，然后給該元素節點添加事件處理器(Event Handler)。
// 例如，以下HTML代碼：
<div id="myDiv" class="box">
<p>我是一個段落。</p>
</div>
// 在Javascript中，你可以使用以下代碼來響應用戶的點擊事件
var div = document.getElementById("myDiv");//獲取元素節點
div.onclick = function(){
alert("你點擊了我的Div！");
};//給元素節點添加事件處理器以上便是Javascript DOM的一些基本用法。當然，DOM的復雜性不僅在于節點之間的聯系，還在于對節點的操作。本文并沒有涉及到DOM API的所有用法，如果你想要深入學習，可以參考MDN上的文檔。無論如何，Javascript DOM絕對是一個值得掌握的技能，希望你可以加油！