< p >JavaScript 是一種強大的編程語言，與 HTML 和 CSS 一起構成了現代 Web 網站的三角形。利用 JavaScript，程序員們可以實現與用戶交互，操作文檔，添加動態效果和事件響應等等。DOM 是 JavaScript 中非常重要的一個概念，它代表著文檔對象模型 (Document Object Model)。它是一種 API 接口，用來訪問和操作 HTML 和 XML 文檔的邏輯結構。< /p >< p >使用 JavaScript 操作 DOM，可以實現各種各樣的功能。下面我們來看一個例子。假設我們有一個按鈕，點擊它后可以修改一個文本框中的文字。我們將按鈕和文本框分別用 HTML 標簽表示：< /p >

< button id="myButton">點擊我< /button>< input type="text" id="myText" value="你好" >< /pre>< p >那么，我們可以使用 JavaScript 代碼來實現這個功能。首先，需要找到按鈕和文本框的 DOM 元素：< /p >
const myButton = document.getElementById('myButton');
const myText = document.getElementById('myText');< /pre>< p >接著，在按鈕的點擊事件處，將文本框的文本內容修改為 “你好啊”：< /p >
myButton.onclick = function() {
myText.value = '你好啊';
};< /pre>< p >這樣，當用戶點擊按鈕時，文本框中的文字就會改變了。這是利用 DOM 元素的屬性進行操作的典型例子。下面，我們再來看一個例子。< /p >< p >假設我們需要向一個列表中添加新的項。我們將列表表示為一個 ul (unordered list)，將每個項表示為 li (list item)：< /p >
< ul id="myList">< li>列表項 1< /li>< li>列表項 2< /li>< li>列表項 3< /li>< /ul>< /pre>< p >現在，我們需要添加一個新的列表項。我們可以用 JavaScript 找到列表元素、創建新的列表項，然后將它添加到列表中：< /p >
const myList = document.getElementById('myList');
const newItem = document.createElement('li');
newItem.textContent = '列表項 4';
myList.appendChild(newItem);< /pre>< p >這樣，我們就成功地向列表中添加了一個新的項。注意到，我們用 DOM API 中的 createElement 和 appendChild 方法進行操作。這兩個方法是 DOM 操作中非常重要的一部分。
在 JavaScript 中，DOM 還有很多其它的應用，比如事件處理、樣式控制、表單操作等等。熟練掌握 DOM 可以使得我們編寫更加復雜和完善的 Web 應用程序。在實際應用中，需要注意到 DOM 操作可能會影響頁面性能。因此，建議盡可能地使用簡單、高效的 DOM 操作技巧，以提高應用程序的性能。