DOM（Document Object Model）是 JavaScript 中用來操作 HTML 頁面的一種機制。DOM 把 HTML 頁面中的所有元素都視為對象，可以使用 JavaScript 通過修改對象的屬性來操作頁面中的元素，如修改元素的樣式、內容等等。

下面舉幾個例子。比如說，在頁面頭部插入一個標題：

var header = document.createElement("h1");   // 新建一個 h1 元素
header.innerHTML = "新標題";                 // 設置元素內容
document.body.appendChild(header);           // 將元素添加到文檔中

再比如說，給一個表格添加一列新數據：

var table = document.getElementById("myTable");     // 獲取表格元素
var rows = table.getElementsByTagName("tr");        // 獲取所有表格行
for (var i = 0; i< rows.length; i++) {
var cell = document.createElement("td");          // 新建一個表格單元格
var text = document.createTextNode("新數據");     // 新建一個文本節點
cell.appendChild(text);                           // 將文本節點添加到單元格中
rows[i].appendChild(cell);                        // 將單元格添加到行中
}

DOM 操作還可以獲取元素的屬性、監聽元素事件、獲取瀏覽器窗口大小、滾動位置等等功能。舉個例子，當用戶點擊一個按鈕時，彈出一個提示框：

var button = document.getElementById("myButton");   // 獲取按鈕元素
button.addEventListener("click", function() {        // 添加點擊事件監聽
alert("你點擊了按鈕！");
});

還有一個常用的功能——改變 CSS 樣式，也可以通過 DOM 實現。下面是一個例子，當用戶鼠標懸停在一個圖片上時，改變其邊框顏色：

var image = document.getElementById("myImage");     // 獲取圖片元素
image.addEventListener("mouseover", function() {     // 添加鼠標懸停事件監聽
this.style.border = "1px solid red";              // 改變邊框樣式
});
image.addEventListener("mouseout", function() {      // 添加鼠標離開事件監聽
this.style.border = "none";                       // 恢復原來邊框樣式
});

總結一下，通過 DOM，我們可以輕松地操作 HTML 頁面中的所有元素，包括新建、添加、刪除元素，獲取元素屬性、事件等，改變樣式等等。DOM 是 JavaScript 前端開發中一個非常重要的技術，有了它我們可以方便地實現交互效果、修改頁面結構。希望大家掌握 DOM 技術，能夠在前端開發中更加熟練地操作頁面元素。