DOM（Document Object Model，文檔對象模型）是基于瀏覽器的JavaScript解釋器提供的一組API，用于訪問和操作HTML或XML文檔的內容和結構。DOM將文檔解析成一個基于節點（node）層次結構的樹，使開發者可以輕松地從元素中讀取或修改文本、屬性(content、attribute)等。

舉例來說，在前端開發中，我們用JS將文本輸入到一個HTML元素里的方式如下：

var element = document.getElementById('myDiv');
element.innerHTML = '提示內容';

在這個例子里，getElementById()方法返回該ID的元素節點，然后innerHTML屬性用于讀取/修改該元素的內容，將其設置為“提示內容”。

JS通過DOM創建或刪除元素也很容易，如下面的代碼：

var ul = document.createElement('ul');
document.body.appendChild(ul); // 將ul元素添加到文檔根部
for (let i = 0; i < 3; i++) {
var li = document.createElement('li');
li.innerHTML = '新添加的li點' + i;
ul.appendChild(li);
}
// 刪除某個元素:
var child = ul.childNodes[1];
ul.removeChild(child);

這個例子中，我們使用createElement方法以及appendChild方法創建了一個超文本列表并循環添加了三個li元素節點，之后又通過removeChild方法刪除了第二個li元素節點。

另一種JS操作DOM的方法是通過修改元素的CSS class，從而達到改變樣式的目的。例如：

// 獲取某個元素:
var p = document.getElementById('demo');
// 設置CSS class:
p.classList.add('myclass');
p.classList.remove('myclass');
p.classList.toggle('myclass');
// 判斷是否擁有某個CSS class:
if (p.classList.contains('myclass')) {
// ...
}

在這個例子中，我們獲取一個ID為'demo'的元素，使用classList屬性方法給它設置了CSS class或移除它（使用add()和remove()方法），還可以把一個class開關切換打開或關閉（使用toggle()方法）。使用contains()方法可以判斷元素是否擁有某種CSS class。

通過DOM，我們能夠動態地讀取或修改一個頁面的指定部分，實現用戶交互及數據處理等功能。同時還能夠創建新元素并添加到頁面上，從而動態地更新和生成頁面內容。DOM提供了很多實用的方法和屬性，開發者可以靈活地使用DOM來在瀏覽器上構建富交互網站。